Dom operations-How to add, remove, move, copy, create, and find nodes.

DOM Operations-How to add, remove, move, copy, create, and find nodes.

(1) Create a new node

createdocumentfragment () // Create a DOM fragment

createelement () // Create a specific element

createTextNode () // Create a text node

(2) Add, remove, replace, insert

(1) Create a new node

createdocumentfragment () // Create a DOM fragment

createelement () // Create a specific element

createTextNode () // Create a text node

(2) Add, remove, replace, insert

AppendChild ()

RemoveChild ()

ReplaceChild ()

InsertBefore ()

(3) Find

getElementsByTagName () // by tag name

getelementsbyname () //value of the Name property of the element

getElementById () // via element Id, Uniqueness

examples of HTML used in this SectionTo

<ul id= "MyList" >

<li> Project One </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 takes a parameter that is to create the tag name of the element, returning the element node that was created

var div = document.createelement ("div"); Create a div element

Div.id = "Mydiv"; set The ID of the Div

Div.classname = "box"; set div 's class

Add elements to the document tree after you create the element

2. add element node the appendchild () method is used to add a node to the end of the childNodes list, returning the element node to be added

var ul = document.getElementById ("MyList"); get ul

var li = document.createelement ("Li"); Create an li

li.innerhtml = " Item four "; Add text to Li

Ul.appendchild (LI); add li to The end of the UL child node

　　after adding :

<ul id= "MyList" >

<li> Project One </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

var ul = document.getElementById ("MyList"); get ul

Ul.appendchild (Ul.firstchild); Move the first element of the UL node to the end of the UL sub-node

after running (IE) :

<ul id= "MyList" >

<li> Project two </li>

<li> Project Three </li>

<li> Project One </li>

</ul>

InsertBefore () method, if you do not insert the node at the end, but want to put in a specific position, with this method, the method accepts 2 parameters, the first is the node to be inserted, the second is the reference node, return the element node to be added

Eg-1:

var ul = document.getElementById ("MyList"); get ul

var li = document.createelement ("Li"); Create an li

Li.innerhtml= " Project four "; Add text to Li

Ul.insertbefore (Li,ul.firstchild); Add li to The first sub-node of ul

after adding :

<ul id= "MyList" >

<li> Project Four </li>

<li> Project One </li>

<li> Project two </li>

<li> Project Three </li>

</ul>

Eg-2:

var ul = document.getElementById ("MyList"); get ul

var li = document.createelement ("Li"); Create an li

Li.innerhtml= " Project four "; Add text to Li

Ul.insertbefore (Li,ul.lastchild); Add li to the end of the sub-node of ul

after adding :

<ul id= "MyList" >

<li> Project One </li>

<li> Project two </li>

<li> Project Three </li>

<li> Project Four </li>

</ul>

Eg-3:

var ul = document.getElementById ("MyList"); get ul

var li = document.createelement ("Li"); Create an li

Li.innerhtml= " Project four "; Add text to Li

var lis = ul.getelementsbytagname ("li")// get a collection of all Li in ul

Ul.insertbefore (Li,lis[1]); 　　　　 // add li to the second Li node in ul

after adding :

<ul id= "MyList" >

<li> Project One </li>

<li> Project Four </li>

<li> Project two </li>

<li> Project Three </li>

</ul>

3. removing ELEMENT nodes

　The RemoveChild () method, which removes the node, takes a parameter, which is the node to remove, returns the removed node, and notes that the removed node is still in the document, but the document does not already have its location.

var ul = document.getElementById ("MyList"); get ul

var fromfirstchild = Ul.removechild (ul.firstchild); Remove ul first child node

var ul = document.getElementById ("MyList"); get ul

var lis = ul.getelementsbytagname ("li")// get a collection of all Li in ul

Ul.removechild (Lis[0]); 　　　　　　 // Remove the first Li, different from the above, consider differences between browsers

4. Replace the element node replacechild () method, replace the node, accept two parameters, the first parameter is the node to be inserted, the second is the node to replace, return the replaced node

var ul = document.getElementById ("MyList"); get ul

var fromfirstchild = Ul.replacechild (ul.firstchild); Replace the first sub-node of ul

var ul = document.getElementById ("MyList"); get ul;

var li = document.createelement ("Li"); Create an li

Li.innerhtml= " Project four "; Add text to Li

var lis = ul.getelementsbytagname ("li")// get a collection of all Li in ul

var returnnode = Ul.replacechild (li,lis[1]); Replace the original second Li with the created Li

5. copy node cloneNode () method, for copying nodes, accept a Boolean parameter, true for deep Copy (copy node and all child nodes), false indicates shallow copy (copy node itself, do not copy child nodes)

var ul = document.getElementById ("MyList"); get ul

var deeplist = Ul.clonenode (true); Deep Copy

var shallowlist = Ul.clonenode (false); Shallow Copy

Dom operations-How to add, remove, move, copy, create, and find nodes.