JS Browser operation DOM Insert Dom

What should we do when we get a DOM node and want to insert a new DOM within this DOM node?

If the DOM node is empty, for example, <div></div> then the innerHTML = ‘<span>child</span>‘ content of the DOM node can be modified directly, equivalent to "inserting" a new DOM node.

If the DOM node is not empty, you cannot do so because innerHTML all of the original child nodes are replaced directly.

There are two ways to insert a new node. One is to use to appendChild add a child node to the last child node of the parent node. For example:

<!--HTML structure--><p id= "JS" >javascript</p><div id= "list" >    <p id= "java" >java</p >    <p id= "python" >Python</p>    <p id= "scheme" >Scheme</p></div>

To <p id="js">JavaScript</p> add to <div id="list"> the last item:

var = document.getElementById(' js '),    = document.getElementById (' list ');     List.appendchild (JS);

Now, the HTML structure has become this:

<!--HTML structure--><div id= "list" >    <p id= "java" >Java</p>    <p id= "python" >python </p>    <p id= "scheme" >Scheme</p>    <p id= "JS" >JavaScript</p></div>

JS Browser operation DOM Insert Dom