1: Node creation
There are three ways to build a new node:
1: createElement()

document.createElement(tagName); //Returns an HTMLElement-type node with a string-type tag name

var p = document.createElement('p'); //<p></p>

2: createTextNode()

document.createTextNode(text);//Returns a Text-type node whose parameters are the contents of the node, the string

var text = document.createTextNode('text node content'); //"text node content"

3: cloneNode()

targetElement.cloneNode(deepClone);//It accepts a parameter and, if true, returns a deep copy of the targetElement, that is, returns the targetElement containing its descendant child nodes; if false, returns only the targetElement itself, without any child nodes.

For example, we have an HTML section:

<ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
</ul>    

We made deep and shallow copies of'< UL >'elements respectively.

4: importNode()

document.importNode(externalNode, deep);

externalNode: From other sources document Of node, Let's say one. iframe Of node
deep: Deep copy, default value false. stay DOM4 When, in deep By default, its default value is true，But then it became false. So in order to be compatible forward and backward, deep Always give a value, don't default.

Let's look at an example of embedding a node from iframe in this document:

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

2: Node insertion
1: appendChild()

parentNode.appendChild(childNode)

AppndChild () method is called on the parent node, the parameter is the child node that you want to insert, and the result of execution is that the child node will become the last child node of the parent node.
Suppose we had an HTMl before:

<ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
</ul>  

Now let's create a new'< Li >'element and add it to'< UL >':

var lastBook = document.createElement('li');
lastBook.textContent = 'last book';
var bookList = document.getElementsByClassName('bookList')[0];
bookList.appendChild(lastBook);

After executing the above code, the previous HTML will become:

<ul class="bookList">
    <li class="bookItem">book 1</li>
    <li class="bookItem">book 2</li>
    <li>last book</li>
</ul>

2: insertBefore()

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

newNode: Nodes you want to insert
referenceNode: New nodes are inserted into referenceNode Before the node. Must pass in one node perhaps null，It cannot be omitted.

Or the above HTML:

<ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
</ul>  

We try to insert a new'<li>'before the last'<li>':

var bookList = document.getElementsByClassName('bookList')[0];
var lastLi = bookList.lastElementChild;
var newLi = document.createElement('li');
newLi.textContent = 'new book';
bookList.insertBefore(newLi, lastLi);

After executing the above code, the original'< Li >'becomes:

<ul class="bookList">
    <li class="bookItem">book 1</li>
    <li>new book</li>
    <li class="bookItem">book 2</li>
</ul>

3: insertAdjacentHTML()

element.insertAdjacentHTML(position, HTMLText);//The parameter is a piece of HTML text
element.insertAdjacentElement(position, Element);//The parameter is an Element
element.insertAdjacentText(position, text); //Insert a paragraph of plain text

The above three methods insert a node at a specific location according to the position value, but the type of parameters is different. The position has four values:

1: 'beforeBegin'
2: 'afterBegin'
3: 'beforeEnd'
4: 'afterEnd'

All four values, hump and lowercase are acceptable.

1: First of all, make a comparison on the use and effect of the above three different methods.
Or prepare an HTML:

 <ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
</ul> 

1: element.insertAdjacentHTML(position, HTMLText);

var bookList = document.getElementsByClassName('bookList')[0];
bookList.insertAdjacentHTML('afterBegin','<p> new node</p>');

After execution, the original HTML becomes as follows:

2: element.insertAdjacentElement(position, Element);
Or the previous HTML, and then we execute:

var bookList = document.getElementsByClassName('bookList')[0];
var newLi = document.createElement('li');
newLi.textContent = 'new node';
bookList.insertAdjacentElement('afterBegin', newLi)

After execution, the effect changes as follows:

3: element.insertAdjacentText(position, text)
Or the previous HTML, and then we execute:

var bookList = document.getElementsByClassName('bookList')[0];
bookList.insertAdjacentText('afterBegin', 'text content')

After execution, a plain text will be added at the very beginning of'<ul>'.

3: Node replacement
4: Node deletion