Detailed comparison between js AppendChild and insertBefore

Detailed comparison between js AppendChild and insertBefore

This article mainly compares AppendChild and insertBefore usage in js in detail. For more information, see.

We know that both appendChild and insertBefore have the function of inserting nodes. However, there are some differences between the two in terms of applications.

 

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

 

<Div id = "test"> <p id = "x1"> Node </p> <p> Node </p> </div>

 

We can write it like this (in some cases, add another comment ):

 

The Code is as follows:

<Script type = "text/javascript">

Var oTest = document. getElementById ("test ");

Var newNode = document. createElement ("p ");

NewNode. innerHTML = "This is a test ";

// The test starts from here.

// AppendChild method:

OTest. appendChild (newNode );

// InsertBefore method:

OTest. insertBefore (newNode, null );

</Script>

 

Through the above code, we can test that a new node is created under the node div, and this node is the last node of the div. (For DOM viewing, IE can be viewed through the IE Developer Toolbar plug-in, Firefox can use Firebug)

 

Obviously, through this example, we can know that both appendChildhild and insertBefore can be used to insert nodes.

 

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

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

</Script>

 

In this example, a new node is inserted before the x1 node.

 

Or:

 

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

</Script>

 

In this example, a new node is inserted before the next node of the x1 node.

 

It can also be:

The Code is 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>

 

In this example, a new node is inserted before the first subnode. You can also insert a new node in another location by changing childNodes [,...].

 

As you can see, the insertBefore () method inserts a new node before an existing subnode. However, in the example 1, The insertBefore () method can also be used to insert a new node at the end of the subnode list. The two conditions are combined to find that the insertBefore () method can insert nodes anywhere in the subnode list.

 

The following examples show that:

AppendChild () method adds a new subnode at the end of the subnode list of the node.

The insertBefore () method inserts a new node anywhere in the node's subnode list.