JavaScript node and List Operation Example summary _javascript tips

This article summarizes the JavaScript node and the method of list operation. Share to everyone for your reference. Specifically as follows:

(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 ()//through the label name Getelementsbyname ()//through the
value of the element's Name property
getElementById ()//through the element ID, uniqueness

Examples of HTML used in this verse

<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 accepts a parameter, that is, the label name of the element to be created, and the element node that is created

var div = document.createelement ("div"); Create a div element
div.id = "mydiv";//Set div id
div.classname = "box";//Set DIV class

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

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:

<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"); Obtain the UL
Ul.appendchild (ul.firstchild);//Take the first element of the UL node to the end of the UL child node

After running (IE):

<ul id= "MyList" >
<li> Project two </li>
<li> project three </li>
<li> project One </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

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:

<ul id= "MyList" >
<li> Project four </li>
<li> project one </li>
<li> project two </li >
<li> Project three </li>
</ul>

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

After adding:

<ul id= "MyList" >
<li> Project one </li>
<li> project two </li>
<li> project Three </li>
<li> Project four </li>
</ul>

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:

<ul id= "MyList" >
<li> Project one </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.

var ul = document.getElementById ("MyList"); Get ul
var fromfirstchild = Ul.removechild (ul.firstchild);//Remove UL first sub node
var ul = document.getElementById (" MyList "); Get ul
var lis = ul.getelementsbytagname ("li")//Get UL All Li's set
ul.removechild (Lis[0]);//Remove First Li, unlike 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

var ul = document.getElementById ("MyList"); Get ul
var fromfirstchild = Ul.replacechild (ul.firstchild);//replace UL first child node
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 all Li's collection of 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)

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

Let's give you a JavaScript. Create a list item, copy a complete instance of a child node:

This JavaScript code shows and builds list items, replicates child nodes, and replicates node trees, and is a useful example of the usefulness of creating a tree menu.

The effect is as shown in the following illustration:

The specific code is as follows:

The

wants this article to help you with your JavaScript programming.