JavaScript's appendchild, InsertBefore, and InsertAfter

1, AppendChild

Adds a node to an array of child nodes of the specified node

Usage: target.appendchild (newchild)
Newchild inserts the last child node as a child node of target

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

The code is as follows	Copy Code
<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> Code

The code is as follows	Copy Code
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 of these methods can be implemented}

The first parameter of this insertbefore is the same as the appendchild, the new node variable, and the Insert second argument can be not only null. You can write that, too.

The code is as follows

Copy Code

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 in front of the node element after the ID p1. That is, the Insert ID is the back of the P1 node element. }

Since the attribute of the Visible insertbefore () method is to insert a new node in front of an existing child node, both cases combine to find that the InsertBefore () method inserts the node, and is available anywhere in the child node list.

2, InsertBefore

Inserts a new child node before the existing child node

Usage: Target.insertbefore (newchild,existingchild)
Newchild is inserted before the Existingchild node as the child node of target
Existingchild is an optional argument, and when null, the effect is the same as AppendChild

DEMO1:

The code is as follows	Copy Code
<script language= "JavaScript" > Window.onload=function () { var a =document.createelement ("span"); var b =document.createtextnode ("Scroll guest css"); A.appendchild (b); Document.body.appendChild (a); The default is added at the end of the document. If we want to specify a location, then we have to use InsertBefore () } </SCRIPT>

Output Result: the scroll guest CSS

The code is as follows

Copy Code

DEMO2: Html: <div id= "B" > Test one </div> <div> Test Two </div> <script language= "JavaScript" > Window.onload=function () { var a =document.createelement ("span"); var b =document.createtextnode ("Scroll guest css"); A.appendchild (b); var Mubiao = document.getElementById ("B"); Mubiao.parentNode.insertBefore (A,mubiao); Insert in front of Div b. Output results: A test of the CSS test two /* Parentelement.insertbefore (newelement, targetelement);

From the above syntax you can see that the parent element, the new element, the target element is the 3 element used by InsertBefore.

We can actually ignore the parent element, because the parent element we can use the target element. parentnode.

Then InsertBefore is very useful. Just give 2 parameters: the new element and the target element.

So is there a InsertAfter () method? The answer looks at the next example.

*/

}

</SCRIPT>

3, InsertAfter

Adds a new node of the sibling after the specified node.

Usage: InsertAfter (Newele, Targetele)
Newele is the node object to add
Targetele is the target object of InsertAfter, Newele is added to the back of Targetele

We know that JavaScript does not have InsertAfter functions, so we need to customize the InsertAfter function:

The code is as follows	Copy Code
function InsertAfter (newel, Targetel) { var parentel = Targetel.parentnode; if (Parentel.lastchild = = Targetel) { Parentel.appendchild (NEWEL); }else{ Parentel.insertbefore (newel,targetel.nextsibling); } }

Full instance

The code is as follows

Copy Code

<title>appendchild, InsertBefore and InsertAfter functions </title> <body> <div id= "target" style= "width:400px;border:2px dashed #666; min_height:300px;_height:300px;" > <div id= "subnode" style= "border:1px dashed #ee3333; Height:100px;margin:3px;text-alien:center" > <b style= "Font-size:24px;font-weight:bold" >subnode</b> </div> </div> <script language= "JavaScript" > function InsertAfter (newel, Targetel) { var parentel = Targetel.parentnode; if (Parentel.lastchild = = Targetel) { Parentel.appendchild (NEWEL); }else{ Parentel.insertbefore (newel,targetel.nextsibling); } } var target = document.getElementById ("target"); var subnode = document.getElementById ("subnode"); AppendChild var newelement = document.createelement ("div"); Newelement.id = "NewNode"; NewElement.style.cssText = "border:1px dashed #3333ee; Height:100px;margin:3px;text-alien:center"; newelement.innerhtml = "<b style=" Font-size:24px;font-weight:bold ">appendChild</b>"; Target.appendchild (newelement); InsertBefore var beforeelement = document.createelement ("div"); Beforeelement.id = "Beforenode"; BeforeElement.style.cssText = "border:1px dashed #3333ee; Height:100px;margin:3px;text-alien:center"; beforeelement.innerhtml = "<b style=" Font-size:24px;font-weight:bold ">insertBefore</b>"; Target.insertbefore (Beforeelement,subnode); InsertAfter var afterelement = document.createelement ("div"); Afterelement.id = "InsertAfter"; AfterElement.style.cssText = "border:2px dashed #666; Height:100px;width:400px;margin-top:3px;text-alien:center"; afterelement.innerhtml = "<b style=" Font-size:24px;font-weight:bold ">insertAfter</b>"; InsertAfter (Afterelement,target); </script> </body>