节点操作

HTML节点我们原来最多最多就是改改HTML属性，比如src属性改改；或者改改css样式，比如.style或者.css()。现在的问题是，我们要增加节点、删除节点、移动节点、替换节点。
1：原生JavaScript节点操作
createElement()和appendChild()
var ul = document.grtElementsByTagName(‘ul’)[0];
//创建一个li标签，用变量oLi来表示。创建出来的节点不是任何节点的儿子，也就是说没有在DOM树上。
var oLi = document.createElement(‘li’);
oLi.innerHTML = ‘AAA’ //改变这个节点里面的内容
//把新创建的节点，追加到DOM树上。
ul.appendChild(oLi);
创建节点的API：
document.createElement();
create创建，Element元素。接受一个参数，就是创建的标签是什么。
追加节点的API：
创建出来的节点不在DOM树上，所有就应该用appendChild()来添加到DOM树上：
父亲.appendChild(新儿子)；
appendChild()一般来说就是用来追加新创建的节点。如果你试图把页面上已经有的节点，appendChild()到别的地方，那么这个节点将移动。也就是说，同一个节点不可能在页面上的两个地方出现。
语句:box2.appendChild(xiaoming);
将使xiaoming移动位置，从box1移动到box2里面。事实上，工作的时候很少使用createElement。因为innerHTML足够好用，innerHTML也可以用来创建节点，甚至效率比createElement还高。
insertBefore
appendChild是把新节点在父亲的所有的儿子后添加，也就是说添加的节点就是父亲的最后一个儿子。我们可以在任意一个位置添加节点。
父亲.insertBefore(新儿子，原有标杆儿子);
会在原有标杆儿子之前插入。
如果想每次添加都在开头添加，那么就是：
ul.insertBefore(oLi,lis[0]);
lis这个变量是动态的，这次添加的li，下回就是lis[0]。
removeChild()
父亲.removeChild(儿子)；
如果要自杀，也要找到爸爸。
this.parentNode.removeChild(this);
replaceChild()
替换节点
父亲.replaceChild(新儿子，老儿子);
cloneNode()
克隆节点，参数true表示深复制，节点里面的所有内容一同复制。复制之后的节点是个孤儿节点，所以也需要使用appendChild、inserBefore、replaceChild来添加上DOM树。
ul.appendChild(lis[0].cloneNode(true));