First, you understand the two methods by definition:
AppendChild () Method: You can add a new child node to the end of the list of child nodes of the node. Syntax: AppendChild (newchild)
InsertBefore () Method: You can insert a new child node before an existing child node. Syntax: InsertBefore (Newchild,refchild)
In the same place: inserting child nodes
Difference: the principle of the implementation of different methods.
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-con
Copy Code code 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 Code code 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 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.
Copy Code code 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 new element node is inserted in front of the element with ID p1
}
Or
Copy Code code 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 in front of the node element after the ID p1.
That is, the Insert ID is the back of the P1 node element.
}
Here's what you want to say about nextSibling: the element immediately following an element (in the same tree hierarchy).
Reforenode.nextsibling: Gets the next node that follows the Reforenode object.
PreviousSibling-Gets the previous sibling node of a node
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.
Oh, ah ... Some methods do not just function in the definition of those features, as long as the syntax, combined with some attributes will always have unexpected gains.
As a beginner, I do not know much, perhaps my understanding is very shallow, some may understand wrong, hope to see can give me a little bit, I do not ask for anything else, I just want to record bit by bit and learn from everyone's suggestions to promote my growth ...
