A detailed analysis of the usage of appendchild and insertbefore in JS

  This article is mainly on the use of JS AppendChild and InsertBefore in a detailed analysis of the introduction, the need for friends can come to the reference, I hope to help you.

AppendChild definition appendchild (Newchild:node): node appends a node to the ChildNodes array for the node. Supported:ie 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ Add a node to an array of child nodes of the specified node, it seems a bit awkward to read, simply to add the element to the specified node   AppendChild usage target.appendchild (newchild)   newchild after inserting the last child node as the target's child node   AppendChild example Var newelement = document. Document.createelement (' label ');  newElement.Element.setAttribute (' value ', ' Username: ');   var usernametext = document. document.getElementById (' username ');  usernametext.appendchild (newelement);    InsertBefore Definition The InsertBefore () method inserts a new child node before a existing child node. The   InsertBefore () method is to insert a new child node   insertbefore usage target.insertbefore (newchild,existingchild) before an existing child node   Newchild is inserted into the Existingchild node as a child node of target   Existingchild is an optional parameter, and when null it has the same effect as appendchild   insertbefore example var otest = document.getElementById ("test"); var newNode = document.createelement ("p"); newnode.innerhtml = "This is a test";   Otest.insertbefore (newnode,otest.childnodes[0]);       Okay, so there's a insertbefore should have InsertAfter, right? Well, let's write an example with Aptana, but Aptana's smart tip tells me that there's no insertafter this way to define a Rom:   InsertAfter define function InsertAfter (newel , Targetel) {      var Parentel = targetel.parentnode         if (Parentel.lastchild = = Targetel)       {           parentel.appendchild (newel);     &NB Sp }else       {           parentel.insertbefore (newel,targetel.nextsibling);      }             {    InsertAfter usage and example var txtname = Document.g Etelementbyid ("txtname"); var Htmlspan = document.createelement ("span"); htmlspan.innerhtml = "This is a test"; InsertAfter (Htmlspan,txtname);   Insert Htmlspan as txtname sibling to the Txtname node   summary: 1, AppendChild and InsertBefore are methods for using the node, and InsertAfter is just a custom function   2, InsertBefore relative to AppendChild, it is more flexible to insert a new node into any location in the target node array.   3, using appendchild and InsertBefore to insert a new node, the premise is that its sibling nodes must have a common parent node