How to insert node appendChild insertBefore in js

First, we can understand the two methods from the definition:
AppendChild () method: you can add a new subnode to the end of the node's subnode list. Syntax: appendChild (newchild)
InsertBefore () method: you can insert a new subnode before an existing subnode. Syntax: insertBefore (newchild, refchild)
Similarities: Insert a subnode
Difference: the Implementation Principles and methods are different.
The appendChild method adds a new node (relative to the parent node) to the end of the child node in the parent node ).
The insertBefore method adds a new node before an existing node (compared to a subnode ).
Let's take a look at this simple example: Add a subnode div at the end of the box-con id. Copy codeThe Code is 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 codeThe Code is 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 methods can be implemented
}

The first parameter of insertBefore is the same as that of appendChild. It is the new node variable, and the second parameter of insert can be null. You can also write it like this.Copy codeThe Code is 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 newly created element node is inserted before the element whose id is p1.
}

OrCopy codeThe Code is 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 before the node element whose id is p1,
That is to say, insert the id behind the element of the P1 node.
}

Here we will talk about nextSibling: Elements followed by an element (in the same tree level ).

ReforeNode. nextSibling: obtains the next node that follows the reforeNode object.

Previussibling-obtain the previous same-level node of a node

It can be seen that the insertBefore () method is characterized by inserting a new node before an existing subnode, but the two conditions are combined to find that the insertBefore () method inserts a node, it can be anywhere in the subnode list.

Hehahaha... Some methods do not only apply to defined features. As long as they conform to the syntax and combine some attributes, there will always be unexpected gains.

As a beginner, I don't know much about it. Maybe my understanding is still quite simple, and some may be wrong. I hope to give me some help and I don't want to ask anything else, I just want to record the details here and draw your suggestions to promote my growth...