JavaScript Learning Notes (19) node operation implementation Code _ basics

Examples of HTML used in this verse

Copy Code code as follows:

<ul id= "MyList" >
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>

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

Copy Code code as follows:

var div = document.createelement ("div"); Create a DIV element
Div.id = "Mydiv"; Set the ID of a div
Div.classname = "box"; Set the class of Div

Add elements to the document tree after you create the element

2. Adding ELEMENT nodes
The AppendChild () method is used to add a node to the end of the ChildNodes list and return the element node to add

Copy Code code 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.appendchild (LI); Add Li to the end of the UL child node

After adding:

Copy Code code as follows:

<ul id= "MyList" >
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
<li> Project Four </li>
</ul>

The AppendChild () method can also add an element that already exists, moving the element from its original position to the new location

Copy Code code as follows:

var ul = document.getElementById ("MyList"); Get UL
Ul.appendchild (Ul.firstchild); Put the first element of the UL node to the end of the UL child node

After running (IE):

Copy Code code as follows:

<ul id= "MyList" >
<li> Project Two </li>
<li> Project Three </li>
<li> Project A </li>
</ul>

InsertBefore () method, if instead of inserting a node at the end, rather than at a specific location, this method accepts 2 arguments, the first is the node to insert, and the second is the reference node, which returns the element node to add

Copy Code code 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 to the first sub-node of UL

After adding:

Copy Code code as follows:

<ul id= "MyList" >
<li> Project Four </li>
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>

Copy Code code 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.null); Add Li to the end of the UL sub-node

After adding:

Copy Code code as follows:

<ul id= "MyList" >
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
<li> Project Four </li>
</ul>

Copy Code code as follows:

var ul = document.getElementById ("MyList"); Get UL
var li = document.createelement ("Li"); Create Li
Li.innerhtml= "Item Four"; Add text to Li
var lis = ul.getelementsbytagname ("li")//Get the collection of all Li in ul
Ul.insertbefore (Li,lis[1]); Add Li to the second Li node in UL

After adding:

Copy Code code as follows:

<ul id= "MyList" >
<li> Project A </li>
<li> Project Four </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>

3. Remove element node
RemoveChild () method, which is used to remove a node, accept a parameter, the node to be removed, return the removed node, and note that the removed node is still in the document, but the document has no location.

Copy Code code as follows:

var ul = document.getElementById ("MyList"); Get UL
var fromfirstchild = Ul.removechild (ul.firstchild); Remove UL first sub node 1 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, which is different from the above to consider the differences between browsers

4. Replace element node
The ReplaceChild () method, which replaces the node, accepts two parameters, the first parameter is the node to be inserted, the second is the node to be replaced, and the replaced node is returned

Copy Code code as follows:

var ul = document.getElementById ("MyList"); Get UL
var fromfirstchild = Ul.replacechild (ul.firstchild); Replace UL first Sub node 1 var ul = document.getElementById ("MyList"); Get ul;
var li = document.createelement ("Li"); Create Li
Li.innerhtml= "Item Four"; Add text to Li
var lis = ul.getelementsbytagname ("li")//Get the collection of all Li in ul
var returnnode = Ul.replacechild (li,lis[1]); Replace the original second Li with the created Li

5. Replication node
CloneNode () method for replicating nodes, accepting a Boolean parameter, true for deep replication (replication node and all of its child nodes), False for shallow replication (replication node itself, No child node replication)

Copy Code code as follows:

var ul = document.getElementById ("MyList"); Get UL
var deeplist = Ul.clonenode (true); Deep copy
var shallowlist = Ul.clonenode (false); Shallow copy

The operation of the node should pay attention to the difference between IE and other browsers (as mentioned in section 18th)