August 9 = 366-375

14.5 add HTML elements

JavaScript scripts can dynamically add nodes to the Dom. When a program adds nodes to the DOM tree, HTML elements are dynamically added to the page. When you need to add HTML elements to a page,

Perform the following two steps.

(1) Create or copy a node.

(2) Add nodes.

 

14.5.1 create or copy a node

The createelement method of the Document Object is usually used to create a node. The syntax is as follows.

VaR A = Document. createelement ("Div ");

When the document. createelement () method is called, the input parameter must be a valid HTML Tag.

You can copy an existing node by calling the node's clonenode () method. The format of this method is as follows.

Node clonenode (Boolean deep): Copies the current node. When deep is true, it indicates that all of the nodes are copied when the current node is copied.

Child Nodes. If deep is false, only the current node is copied.

Code example:

// Obtain the node with ID d

VaR ul = Document. getelementbyid ("D ");

// Copy the second subnode of UL (do not copy the descendant node of the current node)

VaR Ajax = ul. firstchild. nextsibling. clonenode (false );

// Add the copied node to the page

Ul. appendchild (Ajax );

 

14.5.2 Add a node

After a node is created, you must add it to the Dom. For common points, you can use the following method of the Node object to add nodes.

Appendchild (node newnode): Add newnode as the last subnode of the current node.

Insertbefore (node newnode, node refnode): inserts a newnode before the refnode node.

Replaechild (node newchild, node oldchild): replace an oldchild node with a newchild node.

 

14.5.3 add options for the list box and drop-down menu

Add sub-nodes for the list box and drop-down menu, that is, add options for the list box and drop-down menu. There are two ways to add options:

Call the add () method of htmlselectelement to add options.

Directly assign values to the specified <SELECT> option.

Htmlselectelement includes the following method to add new options.

Add (htmloptionelement option, htmloptionelement before): add the option before the before option. If you want to add the option in

Finally, set before to null, or use appendchild (option) to add.

In addition to using the createelement method, you can also use the following constructor to create options.

New Option (text, value, defaultselected, selected)

The constructor has four parameters, which are described as follows:

Text: the text of the option, that is, the "content" displayed by the option ".

Value: select the value of this option.

Defaultselected: sets whether to select this option by default.

Selected: sets whether or not this option is selected.

 

14.5.4 dynamically Add Table content

You can add sub-elements to table elements and table rows. In fact, they can create these subnodes while adding child elements. That is, when you add a table lattice element,

You do not need to use the createelement () method of document to create a node.

The following methods are available for htmltableelement objects.

Insertrow (INDEX): Insert a row at the index. Returns the newly created htmltablerowelement.

Createcaption (): Creates a title for the table. Returns the newly created htmltablecaptionelement. If the table already has a title, an existing title object is returned.

Createtfoot (): Create a <tffot> element for the table. Returns the newly created htmltablefootelement.

Createthead (): Creates a <thead> element for the table. Returns the newly created htmltableheadelement. If the table already has <thead> elements, the existing <thead> elements are returned.

The htmltablerowelement object represents a table row. The object contains the following methods for inserting cells.

Insertcell (long index): Creates a cell in the index and returns the newly created cell.

 

14.6 delete HTML elements

Deleting HTML elements is also accomplished by deleting nodes. For common HTML elements, common methods can be used to delete nodes,

The table has additional methods to delete HTML elements.

 

14.6.1 delete a node

You can delete a node by using its parent node. The Node object provides the following methods to delete a child node.

Removechild (oldnode): deletes the oldnode subnode.

 

14.6.2 options for deleting the list box and drop-down menu

There are two ways to delete the list box and drop-down menu options:

Use the remove () method of the htmlselectelement object to delete options.

You can directly assign the specified option to null.

For the htmlselectelement object, it provides the following methods for deleting options.

Remove (long index): Delete the option at the specified index.

 

14.6.3 Delete rows or cells in a table

The following method is used to delete a specified table row from a table to use the htmltableelement object.

Deleterow (long index): Delete the rows at the index in the table.

The following method deletes a specified cell in a table row using the htmlrowelement object.

Deletecell (long index): Delete the cell at the index of a row.