How to insert node appendChild insertBefore in js

Source: Internet
Author: User

First, we can understand the two methods from the definition:
AppendChild () method: you can add a new subnode to the end of the node's subnode list. Syntax: appendChild (newchild)
InsertBefore () method: you can insert a new subnode before an existing subnode. Syntax: insertBefore (newchild, refchild)
Similarities: Insert a subnode
Difference: the Implementation Principles and methods are different.
The appendChild method adds a new node (relative to the parent node) to the end of the child node in the parent node ).
The insertBefore method adds a new node before an existing node (compared to a subnode ).
Let's take a look at this simple example: Add a subnode div at the end of the box-con id. Copy codeThe Code is as follows: <div class = "btns"> <input type = "button" value = "insert element" id = "creatbtn"/> </div>
<Div id = "box-one">
<P class = "con2" id = "p1"> 1 </p>
<P class = "con2"> 2 </p>
<P class = "con2"> 3 </p>
</Div>

Copy codeThe Code is as follows: window. onload = function (){
Var btn = document. getElementById ("creatbtn ");
Btn. onclick = function (){
InsertEle ();
}
}
Function insertEle (){
Var oTest = document. getElementById ("box-one ");
Var newNode = document. createElement ("div ");
NewNode. innerHTML = "This is a newcon ";
// OTest. appendChild (newNode );
OTeset. insertBefore (newNode, null); // both methods can be implemented
}

The first parameter of insertBefore is the same as that of appendChild. It is the new node variable, and the second parameter of insert can be null. You can also write it like this.Copy codeThe Code is as follows: function insertEle (){
Var oTest = document. getElementById ("box-one ");
Var newNode = document. createElement ("div ");
Var reforeNode = document. getElementById ("p1 ");
NewNode. innerHTML = "This is a newcon ";
OTest. insertBefore (newNode, reforeNode); // the newly created element node is inserted before the element whose id is p1.
}

OrCopy codeThe Code is as follows: function insertEle (){
Var oTest = document. getElementById ("box-one ");
Var newNode = document. createElement ("div ");
Var reforeNode = document. getElementById ("p1 ");
NewNode. innerHTML = "This is a newcon ";
OTest. insertBefore (newNode, reforeNode. nextSibling); // the newly created element node is inserted before the node element whose id is p1,
That is to say, insert the id behind the element of the P1 node.
}

Here we will talk about nextSibling: Elements followed by an element (in the same tree level ).

ReforeNode. nextSibling: obtains the next node that follows the reforeNode object.

Previussibling-obtain the previous same-level node of a node

It can be seen that the insertBefore () method is characterized by inserting a new node before an existing subnode, but the two conditions are combined to find that the insertBefore () method inserts a node, it can be anywhere in the subnode list.

Hehahaha... Some methods do not only apply to defined features. As long as they conform to the syntax and combine some attributes, there will always be unexpected gains.

As a beginner, I don't know much about it. Maybe my understanding is still quite simple, and some may be wrong. I hope to give me some help and I don't want to ask anything else, I just want to record the details here and draw your suggestions to promote my growth...

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.