HTML example to be used in this section
- Project one
- Project two
- Project three
1. Create element node
The document.createElement() method is used to create elements. It accepts a parameter, which is the tag name of the element to be created, and returns the created element. Node
var div = document.createElement("div") ; //Create a div element
div.id = "myDiv"; //Set the div's id
div.className = "box"; //Set the div's class
After creating the element, you must add the element to the document tree
2. Add element node
The appendChild() method is used to add a node to the end of the childNodes list and return the element node to be added
var ul = document.getElementById("myList"); //Get ul
var li = document.createElement("li"); //Create li
li.innerHTML = "Item 4"; //Add text to li
ul.appendChild(li); / /Add li to the end of the ul child node
After adding:
- Project One
- Project Two
- Project Three
- Project Four
appendChild() method can also be added Elements that already exist will be moved from the original position to the new position
var ul = document.getElementById("myList"); //Get ul
ul.appendChild(ul.firstChild); //Move the first element node of ul to the end of the ul child node
After running (IE):
- Project Two
- Project Three
- Project One
insertBefore() method, if you do not insert the node at the end, but want to place it at a specific position, use this method, this method Accepts 2 parameters, the first is the node to be inserted, the second is the reference node, returns the element node to be added
var ul = document.getElementById("myList"); //Get ul
var li = document.createElement("li"); //Create li
li.innerHTML= "Item Four"; //Add text to li
ul.insertBefore(li,ul.firstChild); //Add li before the first child node of ul
After adding:
- Item four
- Item one
- Item two
- Project 3
var ul = document.getElementById("myList"); //Get ul
var li = document.createElement("li"); //Create li
li.innerHTML= "Item 4"; //Add text to li
ul.insertBefore(li,ul.null); //Add li to the end of the child node of ul
After adding:
- Item one
- Item two
- Item three
< ;li>Project 4
var ul = document.getElementById("myList"); //Get ul
var li = document.createElement("li"); //Create li
li.innerHTML= "Item 4"; //Add text to li
var lis = ul.getElementsByTagName("li") //Get the collection of all li's in ul
ul.insertBefore(li,lis[ 1]); //Add li before the second li node in ul
After adding:
- Project 1
- Item 4
- Item 2
- Item 3
🎜>3. Remove element node
removeChild() method, used to remove nodes, accepts a parameter, which is the node to be removed, and returns the removed node. Note that the removed node is still in the document , but its position is no longer in the document
var fromFirstChild = ul.removeChild(ul.firstChild); //Remove the first child node 1 of ul var ul = document.getElementById("myList") ; //Get ul
var lis = ul.getElementsByTagName("li") //Get the collection of all li in ul
ul.removeChild(lis[0]); //Remove the first li, Different from the above, you need to consider the differences between browsers
4. Replace element node
replaceChild() method, used to replace nodes, accepts two parameters, the first parameter is to insert node, the second one is the node to be replaced, return the replaced node
var fromFirstChild = ul.replaceChild(ul.firstChild); //Replace the first child node 1 of ul var ul = document .getElementById("myList"); //Get ul;
var li = document.createElement("li"); //Create li
li.innerHTML= "Item Four"; //Add to li Text
var lis = ul.getElementsByTagName("li") //Get the collection of all li in ul
var returnNode = ul.replaceChild(li,lis[1]); //Replace the original with the created li The second li
5. Copy node
cloneNode() method, used to copy nodes, accepts a Boolean parameter, true means deep copy (copy the node and all its child nodes) , false means shallow copy (copy the node itself, do not copy the child nodes)
var deepList = ul.cloneNode(true); //Deep copy
var shallowList = ul.cloneNode(false); / /Shallow copy
When operating nodes, please pay attention to the differences between IE and other browsers (discussed in Section 18)