Javascript learning note (19th) node operation implementation code

The html example to be used in this section
Copy codeThe Code is as follows:
<Ul id = "myList">
<Li> Project 1 </li>
<Li> Project 2 </li>
<Li> Project 3 </li>
</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.
Copy codeThe Code is as follows:
Var div = document. createElement ("div"); // create a div Element
Div. id = "myDiv"; // you can specify the id of a div.
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.
Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList"); // obtain ul
Var li = document. createElement ("li"); // create a li
Li. innerHTML = "Project 4"; // Add text to li
Ul. appendChild (li); // Add li to the end of the ul subnode

After adding:
Copy codeThe Code is as follows:
<Ul id = "myList">
<Li> Project 1 </li>
<Li> Project 2 </li>
<Li> Project 3 </li>
<Li> Project 4 </li>
</Ul>

The appendChild () method can also add existing elements, which will move the elements from the original location to the new location.
Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList"); // obtain ul
Ul. appendChild (ul. firstChild); // move the first element node of ul to the end of the ul subnode

After running (IE ):
Copy codeThe Code is as follows:
<Ul id = "myList">
<Li> Project 2 </li>
<Li> Project 3 </li>
<Li> Project 1 </li>
</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.
Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList"); // obtain ul
Var li = document. createElement ("li"); // create a li
Li. innerHTML = "Project 4"; // Add text to li
Ul. insertBefore (li, ul. firstChild); // Add li to the front of the first subnode of ul.

After adding:
Copy codeThe Code is as follows:
<Ul id = "myList">
<Li> Project 4 </li>
<Li> Project 1 </li>
<Li> Project 2 </li>
<Li> Project 3 </li>
</Ul>

Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList"); // obtain ul
Var li = document. createElement ("li"); // create a li
Li. innerHTML = "Project 4"; // Add text to li
Ul. insertBefore (li, ul. null); // Add li to the end of the ul subnode

After adding:
Copy codeThe Code is as follows:
<Ul id = "myList">
<Li> Project 1 </li>
<Li> Project 2 </li>
<Li> Project 3 </li>
<Li> Project 4 </li>
</Ul>

Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList"); // obtain ul
Var li = document. createElement ("li"); // create a li
Li. innerHTML = "Project 4"; // Add text to li
Var lis = ul. getElementsByTagName ("li") // obtain the set of all li in ul
Ul. insertBefore (li, lis [1]); // Add li to the front of the second li node in ul

After adding:
Copy codeThe Code is as follows:
<Ul id = "myList">
<Li> Project 1 </li>
<Li> Project 4 </li>
<Li> Project 2 </li>
<Li> Project 3 </li>
</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.
Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList"); // obtain ul
Var fromFirstChild = ul. removeChild (ul. firstChild); // remove ul's first subnode 1 var ul = document. getElementById ("myList"); // obtain ul
Var lis = ul. getElementsByTagName ("li") // obtain the set of all li in ul
Ul. removeChild (lis [0]); // remove the first li. Different from the preceding, 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.
Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList"); // obtain ul
Var fromFirstChild = ul. replaceChild (ul. firstChild); // replace ul's first subnode 1 var ul = document. getElementById ("myList"); // obtain ul;
Var li = document. createElement ("li"); // create a li
Li. innerHTML = "Project 4"; // Add text to li
Var lis = ul. getElementsByTagName ("li") // obtain the set of all li in ul
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)
Copy codeThe Code is as follows:
Var ul = document. getElementById ("myList"); // obtain ul
Var deepList = ul. cloneNode (true); // deep copy
Var shallowList = ul. cloneNode (false); // shallowList

Note the differences between IE and other browsers for node operations (as described in section 18th)