A detailed comparison between JS AppendChild and InsertBefore usage

Source: Internet
Author: User
Tags comparison

  This article is mainly about the use of JS AppendChild and InsertBefore in a detailed comparison. Need friends can come to the reference, I hope to help you.

We know that both appendchild and InsertBefore have the ability to insert nodes. But in the application, there are some differences between the two.   For example 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 this way (when testing a situation please put another note):     Code as follows: <script type= "Text/javascript" >  var otest = document.getElementById ("Test");  var newNode = document.createelement ("P");  newnode.innerhtml = "This is a Test "; //testing starting from here  //appendchild method:  Otest.appendchild (NewNode); //insertbefore method:  Otest.insertbefore (newnode,null);  </script>   through the above code, you can test to a new node is created under the node Div, and the node is the last div node. (If you want to see Dom,ie can be viewed through the IE Developer Toolbar plugin, Firefox can use Firebug)   Obviously, through this example, You can know that both appendchildhild and InsertBefore can do the Insert node operation.   In the above example, there is a code: Otest.insertbefore (Newnode,null), where InsertBefore has 2 parameters can be set, the first is the same as AppendChild, and the second is unique. Not only can it be null, it can also be:   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 inserts a new node in front of the X1 node   or:     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 inserts a new node before the next node in the X1 node   can also be: 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 inserts a new node in front of the first child node, or by changing the childnodes[0,1,...] To insert a new node in another location   because the attribute of the Visible insertbefore () method is to insert a new node in front of an existing child node, in example one, use IThe Nsertbefore () method can also insert the new node at the end of the list of child nodes. In combination, it is found that the InsertBefore () method inserts a node, which can be anywhere in the child node list.   From these examples: 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 point in the node's child node list.  
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.