Beginner's js insert node appendChild insertBefore usage method_javascript skills

First, understand these two methods from the definition:
appendChild() method: You can add a new child node to the end of the node's child node list. Syntax: appendChild(newchild)
insertBefore() Method: A new child node can be inserted before an existing child node. Syntax: insertBefore(newchild,refchild)
Sameness: insert child node
Difference: different implementation principles and methods.
The appendChild method adds a new node at the end of the child node in the parent node (relative to the parent node).
　The insertBefore method is to add a new node (relative to the child node) before the existing node.
Let’s take a look at this simple example: add a child node div at the end with the id of box-con

Copy code The code is as follows:

1

2

3

Copy code The 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 appendChild, which is the new node variable, and the second parameter of insert Not only can be null. You can also write it like this

Copy code The 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 new element node is inserted in front of the element with id p1
}

or

Copy code The 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,foreNode.nextSibling);//The newly created element node is inserted in front of the node element with the id of p1,
　　　　　　　　　　　　　　　　　　　　　　 in other words, is inserted behind the element of the node with the id of P1.
}

What I want to say here is nextSibling: the element immediately following an element (in the same tree level).

reforeNode.nextSibling: Obtains the node immediately following the beforeNode object.

previousSibling - Get the previous sibling node of a node

Since it can be seen that the characteristic of insertBefore() method is to insert a new node in front of the existing child node, but combining the two situations, it is found that The insertBefore() method inserts a node at any position in the child node list.

Hehehe. . . Some methods not only act on the defined characteristics, but as long as they comply with the grammar, there will always be unexpected gains when combining some attributes.

As a beginner, I don’t know much. Maybe my understanding is still very shallow, and some may be misunderstood. I hope what I saw can give me some advice. I don’t ask for anything else. I just hope I record every bit of it here and absorb everyone's suggestions to promote my growth. . .