DOM操作 ——添加、删除、移动、复制、创建和查找

1.创建新节点

　　document.createDocumentFragment()   //创建一个DOM片段

　　document.createElement('tag') //创建一个元素

　　document.createTextNode() //创建一个文本节点

2.添加节点 appendChild()

var ul = document.getElementById('id')
var li  = document.createElement('li')

ul.appendChild(li)  //把li添加到ul子节点的末尾

3.插入节点 insertBefore()

var ul = document.getElementById("myList");    //获得ul
var li = document.createElement("li");         //创建li

ul.insertBefore(li,ul.firstChild) //把li添加到ul的第一个子节点前

4.删除节点：removeChild()

var ul = document.getElementById("myList");            //获得ul
var fromFirstChild = ul.removeChild(ul.firstChild);    //移除ul第一个子节点

5、替换节点：node.replaceChild(newEle,oldEle)

6、复制节点： cloneNode()

var ul = document.getElementById("myList");    //获得ul
var deepList = ul.cloneNode(true);            //深复制
var shallowList = ul.cloneNode(false);        //浅复制 不填默认false

3. 移动节点：

var cloneEl = oldDom.clone(true) //复制被移动的节点
document.removeChild(oldDom) //删除原节点
document.insertBefore(cloneEl,newel) //插入到目标节点之前