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:
<div id="test"><p id="x1">Node</p><p>Node</p></div>
We can write like this (please add another comment when testing a certain situation):
Copy the code code as follows:
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
//Testing starts here
//appendChild method:
oTest.appendChild(newNode);
//insertBefore method:
oTest.insertBefore(newNode,null);
</script>
Through the above code, you can test that a new node is created under the node div, and this 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, we 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. Not only can it be null, but it can also be:
Copy the code code 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);
</script>
This example will insert a new node in front of the x1 node
Or:
Copy the code code 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.nextSibling);
</script>
This example will insert a new node before the next node of x1 node
Also available for:
Copy the code code 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. 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 a node's list of child nodes.
The insertBefore() method inserts a new node at any position in the node's child node list.