Introduction to the use and distinction of appendChild of or insertBefore of

Document.createelement () creates an object in an object and is used in conjunction with appendChild() or insertBefore() methods. Where the appendChild() method adds a new child node at the end of the node's list of children. The insertBefore() method inserts a new node at any point in the list of children of the node.

Next, illustrate the use of document.createelement (). < Div id = "board" > < / div>
Case 1:

 
<script type="text/javascript"> 
var board = document.getElementById("board"); 
var e = document.createElement("input"); 
e.type = "button"; 
e.value = " This is a small example of a test load "; 
var object = board.appendChild(e); 
</script> 

Effect: load a button in the tag board with a property value of "this is a small example of a test load."

Example 2:

 
<script type="text/javascript"> 
var board = document.getElementById("board"); 
var e2 = document.createElement("select"); 
e2.options[0] = new Option(" add-in 1", ""); 
e2.options[1] = new Option(" add-in 2", ""); 
e2.size = "2"; 
var object = board.appendChild(e2); 
</script> 

Effect: load a drop-down list box in the tag board with the property values "add-in 1" and "add-in 2".

Example 3:

 
<script type="text/javascript"> 
var board = document.getElementById("board"); 
var e3 = document.createElement("input"); 
e4.setAttribute("type", "text"); 
e4.setAttribute("name", "q"); 
e4.setAttribute("value", " use setAttribute"); 
e4.setAttribute("onclick", "javascript:alert('This is a test!');"); 
var object = board.appendChild(e3); 
</script> 

Effect: load a text box in the tag board with the attribute value "use setAttribute". When you click on the text box, the dialog box "This is a test!" pops up. .

From the above example, you can see that you can set it by loading the properties of the object, with the same parameters. The effect is the same with e.texpe ="text" and e.setattribute ("type","text").

Now let's illustrate the difference between the appendChild() method and the insertBefore() method.
For example, when we want to insert a child node P in the following div: < Div id = "test" > < P id = "x1" > Node< / p> < P> Node< / p> < / div>
We can write it like this:

 
<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
//The test starts here
//The appendChild method:
oTest.appendChild(newNode); 
//InsertBefore method:
oTest.insertBefore(newNode,null); 
</script> 

With the above code, you can test that a new node is created under the node div and that the node is the last node in the div. Obviously, from this example, you know that appendChildhild and insertBefore can both insert nodes.

In the above example there is a line of code: otest.insertbefore (newNode,null), where insertBefore has two parameters to set, the first is the same as appendChild, the second is unique to it. Not only can it be null, but it can also be:

 
<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var refChild = document.getElementById("x1"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,refChild); 
</script> 

Effect: this example inserts a new node in front of the x1 node

Or again:

 
<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var refChild = document.getElementById("x1"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,refChild.nextSibling); 
</script> 

Effect: this example inserts a new node in front of the next node of the x1 node

Can also be as follows:

 
<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,oTest.childNodes[0]); 
</script> 

This example will insert a new node in front of the first child node, also by changing the childNodes[0,1,...] To insert a new node somewhere else
Since you can see that the insertBefore() method's property is to insert a new node in front of an existing child node, the insertBefore() method can also be used in example 1 to insert a new node at the end of the child node list. The two cases are combined to find that the insertBefore() method inserts a node anywhere in the list of child nodes.

From these examples:
The appendChild() method adds a new child node at the end of the node's list of children.
The insertBefore() method inserts a new node at any point in the list of children of the node.