appendChild、removeChild、insertBefore、createElement、cloneNode的区别；

html元素：

<div id="box">
    <ul id="ul">
        <li>第一个</li>
        <li id="one">第二个</li>
        <li>第三个</li>
    </ul>
    <p>我是第二个子节点</p>
</div>      

1. createElement：动态创建元素节点；

2. appendChild：给元素添加一个子元素；

添加新元素前样式：

第一个

第二个

第三个

添加新元素后样式：

第一个

第二个

第三个

我是新添加的

var item = document.createElement("li");
var text = document.createTextNode("我是新添加的");
item.appendChild(text);
var one = document.getElementById("ul");
one.appendChild(item)
添加新元素后样式：
      

3. removeChild：只能在父级下进行操作，删除子元素；

删除元素前样式：

• 第一个
• 第二个
• 第三个

删除元素后样式：

• 第一个
• 第三个

var one = document.getElementById("ul");
var Li = document.getElementById("one");
one.removeChild(Li)      

4. insertBefore：在指定的元素前插入新元素；父元素.insertBefore(新添加的元素，指定的元素)；当指定的元素为null时，插入成为最后一个元素；

插入元素前：

• 第一个
• 第二个
• 第三个

插入元素后：

• 第一个
• 我是新添加的
• 第二个
• 第三个

var oUl = document.getElementById("ul");
var one = document.getElementById("one");
var oLi = document.createElement("li");
var text = document.createTextNode("我是新添加的");
oLi.appendChild(text);
oUl.insertBefore(oLi,one);      

cloneNode():克隆；不会复制添加到DOM节点中的属性，只复制特性、子节点；

cloneNode(true)：深度克隆，克隆元素本身和他的子元素；

cloneNode(flase)：只克隆元素本身,连里边的文本都不复制；

var  oBox = document.getElementById("box");
var btn = oBox.cloneNode(true); //var btn = oBox.cloneNode(false);
document.body.appendChild(btn);