Detailed comparison of js AppendChild and insertBefore usage

Detailed comparison of js AppendChild and insertBefore usage_javascript skills

WBOY

Release： 2016-05-16 17:09:08

Original

1026 people have browsed it

We know that appendChild and insertBefore both have the function of inserting nodes. But in application, there are still some differences between the two.

For example, when we want to insert a child node P in the following div:

Node

We can write like this (please add another comment when testing a certain situation):

Copy code The code is as follows:

Through the above code, you can test that a new node is created under the node div, and the The node is the last node of the div. (To view the DOM, IE can view it through the IE Developer Toolbar plug-in, and Firefox can use Firebug)

Obviously, through this example, you can know that both appendChildhild and insertBefore can insert nodes.

In the above example, there is such a code: oTest.insertBefore(newNode,null). Here insertBefore has two parameters that can be set. The first one is the same as appendChild, but the second one is unique to it. It can not only be null, but also:

Copy code The code is as follows:

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

This example A new node will be inserted in front of the x1 node

Or:

Copy code The code is as follows:

This example will be Insert a new node in front of the next node of x1 node

Also:

Copy the code The code is as follows:

This example will insert a new node in front of the first child node, You can also insert new nodes at other locations by changing childNodes[0,1,...]

Since it can be seen that the insertBefore() method is to insert a new node in front of the existing child node, but in Example 1, the insertBefore() method can also be used to insert a new node at the end of the child node list. Combining the two situations, it is found that the insertBefore() method can insert a node at any position in the child node list.

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