Introduction to the usage and differences of appendChild() or insertBefore()_Basic knowledge

document.createElement() creates an object within an object and should be used in conjunction with the appendChild() or insertBefore() methods. Among them, the appendChild() method adds a new child node at 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.

The following is an example of how to use document.createElement().

Example 1:

Copy code The code is as follows:

Effect: Load a button in the label board with the attribute value "This is a small example of testing loading".

Example 2:

Copy code The code is as follows:

Effect: Load a drop-down list box in the label board, with the attribute values ​​​​"Add-in 1" and "Add-in 2".

Example 3:

Copy code The code is as follows:

Effect: in tag Load a text box into the board with the attribute value "use setAttribute". When this text box is clicked, the dialog box "This is a test!" will pop up.

According to the above example, it can be seen that it can be set by loading the properties of the object, and the parameters are the same. Using e.type="text" and e.setAttribute("type", "text") have the same effect.

Below, we use examples to describe the differences between the appendChild() method and the insertBefore() method.
For example, when we want to insert a child node P into the following div:

Node

Node

We can write like this:

Copy the code The code is as follows:

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 . Obviously, through this example, we can know that both appendChildhild and insertBefore can insert nodes.

In the above example, there is this 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);

Effect: This example will insert a new node

in front of the x1 node or:

Copy the code The code is as follows:

Effect: This example will insert a new node in front of the next node of the x1 node

. It can also be:

Copy 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,...] Node
As you can see, the characteristic of the insertBefore() method is to insert a new node in front of the existing child node. However, 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:
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.