AppendChild () or insertBefore () usage and Difference

Source: Internet
Author: User

Document. createElement () is an object created in the object. It must be used together with the appendChild () or insertBefore () method. The 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.

The following is an example of document. createElement () usage. <Div id = "board"> </div>
Example 1:
Copy codeThe Code is as follows:
<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 test loading ";
Var object = board. appendChild (e );
</Script>

Effect: load a button in the tab board with the attribute value "this is a small example of test loading ".

Example 2:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var board = document. getElementById ("board ");
Var e2 = document. createElement ("select ");
E2.options [0] = new Option ("add-on 1 ","");
E2.options [1] = new Option ("add-on 2 ","");
E2.size = "2 ";
Var object = board. appendChild (e2 );
</Script>

Effect: load a drop-down list box on the tab board. The attribute values are "add-on 1" and "add-on 2 ".

Example 3:
Copy codeThe Code is as follows:
<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: Add a text box to the tab board. The attribute value is "use setAttribute ". When you click This text box, the "This is a test!" dialog box is displayed !".

According to the above example, we can see that the parameters are the same by loading the object attributes. Use e. type = "text" and e. setAttribute ("type", "text") to achieve the same effect.

Next, we will use an example to describe the differences between the appendChild () method and the insertBefore () method.
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 as follows:
Copy codeThe 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. 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:
Copy codeThe 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>

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

Or:
Copy codeThe 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>

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

It can also be:
Copy codeThe 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.