JS: Insert node AppendChild insertbefore how to use

The two methods are understood first from the definition:
appendchild () method: You can add a new child node to the end of the node's child nodes list . Syntax: AppendChild (newchild)
insertbefore () method: You can insert a new child node before the existing child node . Syntax: InsertBefore (Newchild,refchild)
The same: Insert child nodes
Differences: The principle and method of implementation are different.
The AppendChild method is to add a new node (relative to the parent node) at the end of the child node in the parent node .
The InsertBefore method is to add a new node (relative to the child node) before the existing node .

Take a look at this simple example: Add a child node div at the end of ID box-one

1 <div class= "Btns" >
<input type= "button" value= "Insert Element" id= "creatbtn"/>
2 3 4 5 6

1Window.onload =function () { 2  　　 varBTN = document.getElementById ("creatbtn"); 3Btn.onclick =function() { 4  　　　　 Insertele ();5 } 6 } 7 functionInsertele () {8  　　 varOtest = document.getElementById ("Box-one"); 9  　　 varNewNode = document.createelement ("div"); CreateElement is to create an object in an objectTennewnode.innerhtml = "This is a Newcon";  One  　　 //Otest.appendchild (newNode); AOteset.insertbefore (NewNode,NULL);//Both of these methods can be implemented or Oteset.insertbefore (Newnode,oteset.childnodes[0])
 　　　　  -}

The first parameter of this insertbefore is the same as the appendchild, which is the new node variable, and the insert second parameter can be not only null. You can also write this:

1 functionInsertele () {2  　　 varOtest = document.getElementById ("Box-one"); 3  　　 varNewNode = document.createelement ("div"); 4  　　 varReforenode = document.getElementById ("P1"); 5newnode.innerhtml = "This is a Newcon"; 6Otest.insertbefore (Newnode,reforenode);//The newly created element node is inserted in front of the element with ID p1
or Otest.insertbefore (newnode,reforenode.nextsibling);//The newly created element node is inserted in front of the node element with the ID P1, which means that the insertion ID is behind the P1 node element.
7}

NextSibling: The element immediately following an element (in the same tree hierarchy).

Reforenode.nextsibling: Gets the next node immediately following the Reforenode object.
PreviousSibling-Gets the previous sibling node of a node.

AppendChild cannot set the explicit position//otest.appendchild (oP2) you want to insert; InsertBefore can be set//otest.insertbefore (Op2,null);//otest.insertbefore (OP2,OP1);//otest.insertbefore (OP2, op1.nextsibling);//otest.insertbefore (op2,op3.previoussibling);//otest.insertbefore (OP2,oTest.childNodes[0]);

All right, so there's insertbefore, and there's InsertAfter , right?
Well then let's write an example with Aptana, but Aptana's smart tip tells me there's no InsertAfter this method
Then define yourself as a ROM.
InsertAfter definition

1 function  2     var parentel =3     if(parentel.lastchild = =   45             }else 6         7      8 }     

Summarize:
1, appendchild and InsertBefore are used in the way of nodes, and InsertAfter is just a custom function
2. InsertBefore relative to AppendChild, it is more flexible to insert a new node into any position in the destination node array.
3, using AppendChild and InsertBefore to insert a new node if the sibling node must have a common parent node

If analyzed only from the performance of DOM operations, the two methods of AppendChild and InsertBefore are not very different in themselves. However, InsertBefore itself has appendchild incomparable function, it can choose the position of inserting element. As a result, it can have a greater impact on the page, and the rendering overhead may be greater.

Finally, by the way, on IE6, using appendchild before the document is loaded will make an error, and using InsertBefore will not be an error.

JS: Insert node AppendChild insertbefore how to use