Let's start with a brief description of the corresponding sentences and usages for each method.

obj.appendChild(node) adds a new child node to the specified node (inserting a new child node (element). That may not be very clear. The code may be clearer. Node represents the node to be added.

 1     // Get elements
 2     var div=document.getElementById("div1");
 3     // Create elements, add words to elements
 4     var p=document.createElement("p");
 5     p.innerHTML="Add 1";
 6     var p1=document.createElement("p");
 7     p1.innerHTML="Add 2";
 8     var p2=document.createElement("p");
 9     p2.innerHTML="Add 3";
10     // add to div in
11     div.appendChild(p);
12     div.appendChild(p1);
13     div.appendChild(p2);

But this method can only add elements at the end of the parent node. So what if we want to add in the middle of the parent element? w3c also provides a method, which is obj.insertBefore(node,existingnode).

obj.insertBefore(node,existingnode) means inserting a new child node before the specified existing child node. Node denotes the node to be added, and existingnode denotes the child node that inserts the new node before it. If not specified, the insertBefore method is inserted at the end.

 1      // Get elements
 2     var div=document.getElementById("div1");
 3     // Create elements, add words to elements
 4     var p=document.createElement("p");
 5     p.innerHTML="Add 1";
 6     var p1=document.createElement("p");
 7     p1.innerHTML="Add 2";
 8     var p2=document.createElement("p");
 9     p2.innerHTML="Add 3";
10     // add to div in
11     div.appendChild(p);
12     div.insertBefore(p1,p);
13     div.insertBefore(p2,p1);

insetBefore() can also be said to be inserted as a node ha!

Obj. replaceChild (new node, old node) replaces a child node with a new node. The oldnode node must be a child of the obj element, and its return value is a reference pointer to the child node that has been replaced.

 1     var div=document.getElementById("div1");
 2     // Create elements and add text to them
 3     var p=document.createElement("p");
 4     p.innerHTML="Add 1";
 5     var p1=document.createElement("p");
 6     p1.innerHTML="Add 2";
 7     var p2=document.createElement("p");
 8     p2.innerHTML="Add 3";
 9     // add to div in
10     div.appendChild(p);
11     div.insertBefore(p1,p);
12     div.insertBefore(p2,p1);
13     // Create a new element
14     var span=document.createElement("span");
15     span.innerHTML="span";
16     // Replace the first p
17     div.replaceChild(span,p);

If the inserted element itself has child nodes, those child nodes are also inserted in front of the target node.

The replaceChild() method can also replace another existing node with an existing node in the document tree. Code can be displayed more clearly!

 1      // Get elements
 2     var div=document.getElementById("div1");
 3     // Create elements and add text to them
 4     var p=document.createElement("p");
 5     p.innerHTML="Add 1";
 6     var p1=document.createElement("p");
 7     p1.innerHTML="Add 2";
 8     var p2=document.createElement("p");
 9     p2.innerHTML="Add 3";
10     // add to div in
11     div.appendChild(p);
12     div.insertBefore(p1,p);
13     div.insertBefore(p2,p1);
14     // take p2 Replace with p
15     div.replaceChild(p,p2);

tips using the replaceChild() method:

1. When the oldnode is replaced, all attribute contents associated with it will be removed.  
2. newnode must be established first.  

Remove Child (node) Delete child nodes (elements), this is directly on the code bar!

 1      // Get elements
 2     var div=document.getElementById("div1");
 3     // Create elements and add text to them
 4     var p=document.createElement("p");
 5     p.innerHTML="Add 1";
 6     var p1=document.createElement("p");
 7     p1.innerHTML="Add 2";
 8     var p2=document.createElement("p");
 9     p2.innerHTML="Add 3";
10     // add to div in
11     div.appendChild(p);
12     div.insertBefore(p1,p);
13     div.insertBefore(p2,p1);
14     // delete p1
15     div.removeChild(p1);

This is probably the case with knowledge points. There is no difficulty. But when I was doing the case, I also encountered some problems. This is the problem of the parent element. In the previous case of adding information, we found that if we write tr directly in the table, and then use the table as the parent element to add rows to it, the following error will be reported.

This is because the table directly writes tr, although it will not report errors, but the browser will give you a tbody, which will lead to tr is not the child of the table, there will be such errors, so pay attention to whether the parent element is written correctly, in fact, it can also select the father through the child, so as to ensure that there will be no such errors.