添加新元素：创建+添加节点

创建节点

document.createElement(‘tagName’) 创建有tagName 指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以，我们也称为动态创建元素节点。

注： 除了document.createElement(‘tagName’)之外，还有两种创建元素的方法（document.writr() 、element.innerHTML 三种创建元素的方法详解与比较在另一篇 博文.）

添加节点

在子节点后追加元素：node.appendChild(child) node-父级 child-子级
在某一指定元素前添加元素：node.insertBefore(child，指定元素） node-父级 child-子级

<ul>
    <li>123</li>
</ul>
//1.创建元素节点
var li = document.createElement('li');
var ul = document.querySelector('ul');//获取父级
//1.创建元素节点
var li = document.createElement('li');
//2. 添加节点node.appendChild(child)  node-父级 child-子级
ul.appendChild(li);//appendChild 是后面追加元素，类似于数组中的push
//3.insertBefore（）在指定位置前添加新元素
var li3 = document.createElement('li');
ul.insertBefore(li3,ul.children[0]);//在ul第一个元素前添加

删除节点

node.removeChild(child) 方法从DOM中删除一个子节点，返回删除的节点

<button>删除</button>
<ul>
    <li>111</li>
    <li>222</li>
</ul>
<script>
    var ul = document.querySelector('ul');//获取父级
    var btn = document.querySelector('button');
    btn.onclick = function(){
    	ul.removeChild(ul.children[0]);//点击按钮删除ul中第一个子节点
    }
</script>

复制（克隆）节点

node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。
注意：
1.如果括号参数为空或者false，则是浅拷贝，即只复制节点本身，不复制里面的子节点。
2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

浅拷贝：

<button>拷贝</button>
<ul>
    <li>111</li>
    <li>222</li>
</ul>
<script>
    var ul = document.querySelector('ul');//获取父级
    var btn = document.querySelector('button');
    btn.onclick = function(){
        li = ul.children[0].cloneNode();//浅拷贝ul中第一个子节点
        ul.appendChild(li);
    }
</script>

深度拷贝：

li = ul.children[0].cloneNode(true)//