JavaScript study notes (19) Node operation implementation code_Basic knowledge

HTML example to be used in this section

Copy code The code is as follows:

• 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

Copy code The code is as follows:

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

Copy code The code is as follows:

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:

Copy the code The code is as follows :

• 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

Copy the code The code is as follows:

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):

Copy code The code is as follows:

• 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

Copy code The code is as follows:

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:

Copy the code The code is as follows:

• Item four


• Item one


• Item two


• Project 3

Copy code The code is as follows:

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:

Copy code The code is as follows:

• Item one


• Item two


• Item three

< ;li>Project 4

Copy code The code is as follows:

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:

Copy code The code is as follows:

• 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

Copy code The code is as follows: var ul = document.getElementById("myList"); //Get ul

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

Copy code The code is as follows: var ul = document.getElementById("myList"); //Get ul

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)

Copy code The code is as follows: var ul = document.getElementById("myList"); //Get ul

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)