Create, add, remove, move, and copy nodes

Dom operations-how to add, remove, move, copy, create, and search nodes.

(1) create a new node

Createdocumentfragment () // create a DOM snippet

Createelement () // create a specific element

Createtextnode () // create a text node

(2) add, remove, replace, and insert

Appendchild ()

Removechild ()

ReplaceChild ()

Insertbefore ()

(3) Search

Getelementsbytagname () // use the Tag Name

Getelementsbyname () // The value of the element's name attribute

Getelementbyid () // unique by element ID

 

The HTML example to be used in this section

1 <ul id = "mylist"> 2 <li> Project 1 </LI> 3 <li> Project 2 </LI> 4 <li> Project 3 </LI> 5 </ul>

1. Create an element node
The document. createelement () method is used to create an element. It accepts a parameter, that is, the tag name of the element to be created, and returns the created element node.

1 var DIV = document. createelement ("Div"); // create a div element 2 Div. id = "mydiv"; // sets the ID3 Div of the Div. classname = "box"; // sets the class of the DIV

After creating an element, add it to the document tree.

2. Add element nodes
The appendchild () method is used to add a node to the end of the childnodes list and return the element node to be added.

1 var ul = document. getelementbyid ("mylist"); // obtain ul2 var li = document. createelement ("Li"); // create li3 Li. innerhtml = "Project 4"; // Add text 4 ul to Li. appendchild (LI); // Add Li to the end of the UL subnode

After adding:

1 <ul id = "mylist"> 2 <li> Project 1 </LI> 3 <li> Project 2 </LI> 4 <li> Project 3 </LI> 5 <li> Project 4 </LI> 6 </ul>

The appendchild () method can also add existing elements, which will move the elements from the original location to the new location.

1 var ul = document. getelementbyid ("mylist"); // obtain ul2 ul. appendchild (ul. firstchild); // move the first element of UL to the end of the UL subnode.

After running (IE ):

1 <ul id = "mylist"> 2 <li> Project 2 </LI> 3 <li> Project 3 </LI> 4 <li> Project 1 </LI> 5 </ul>

Insertbefore () method. If you want to insert a node not at the end but at a specific position, this method accepts two parameters. The first method is the node to be inserted, the second is the reference node, which returns the element node to be added.

1 var ul = document. getelementbyid ("mylist"); // obtain ul2 var li = document. createelement ("Li"); // create li3 Li. innerhtml = "Project 4"; // Add text 4 ul to Li. insertbefore (Li, ul. firstchild); // Add Li to the front of the first subnode of UL

After adding:

1 <ul id = "mylist"> 2 <li> Project 4 </LI> 3 <li> Project 1 </LI> 4 <li> Project 2 </LI> 5 <li> Project 3 </LI> 6 </ul>

1 var ul = document. getelementbyid ("mylist"); // obtain ul2 var li = document. createelement ("Li"); // create li3 Li. innerhtml = "Project 4"; // Add text 4 ul to Li. insertbefore (Li, ul. lastchild); // Add Li to the end of the UL subnode

After adding:

1 <ul id = "mylist"> 2 <li> Project 1 </LI> 3 <li> Project 2 </LI> 4 <li> Project 3 </LI> 5 <li> Project 4 </LI> 6 </ul>

1 var ul = document. getelementbyid ("mylist"); // obtain ul2 var li = document. createelement ("Li"); // create li3 Li. innerhtml = "Project 4"; // Add text 4 var Lis = ul to Li. getelementsbytagname ("Li") // obtain the set of all Li in UL 5 ul. insertbefore (Li, Lis [1]); // Add Li to the front of the second li node in UL

After adding:

1 <ul id = "mylist"> 2 <li> Project 1 </LI> 3 <li> Project 4 </LI> 4 <li> Project 2 </LI> 5 <li> Project 3 </LI> 6 </ul>

 

3. Remove element nodes
The removechild () method is used to remove a node. It accepts a parameter, that is, the node to be removed, and returns the removed node. Note that the removed node is still in the document, however, there is no location in the document.

1 var ul = Document. getelementbyid ("mylist"); // obtain ul2 var fromfirstchild = ul. removechild (UL. firstchild); // remove the first child node of UL

1 var ul = document. getelementbyid ("mylist"); // obtain ul2 var Lis = ul. getelementsbytagname ("Li") // obtain the set of all Li in UL 3 ul. removechild (LIS [0]); // remove the first Li. Different from the preceding one, consider the differences between browsers.

4. Replace element nodes
The replaceChild () method is used to replace nodes. Two parameters are accepted. The first parameter is the node to be inserted, the second parameter is the node to be replaced, and the replaced node is returned.

1 var ul = Document. getelementbyid ("mylist"); // obtain ul2 var fromfirstchild = ul. replaceChild (UL. firstchild); // replace UL's first subnode

1 var ul = document. getelementbyid ("mylist"); // obtain ul; 2 var li = document. createelement ("Li"); // create li3 Li. innerhtml = "Project 4"; // Add text 4 var Lis = ul to Li. getelementsbytagname ("Li") // obtain the set of all Li in UL 5 var returnnode = ul. replaceChild (Li, Lis [1]); // replace the original second Li with the created Li

5. Copy a node
The clonenode () method is used to copy a node and accepts a Boolean parameter. True indicates deep replication (copying a node and all its subnodes), and false indicates light replication (copying a node itself, do not copy subnodes)

1 var ul = document. getelementbyid ("mylist"); // obtain ul2 var deeplist = ul. clonenode (true); // deep copy 3 var shallowlist = ul. clonenode (false); // light copy