第十四课：js操作节点的插入，复制，移除
节点插入
appendChild方法，insertBefore方法是常用的两个节点插入方法，具体实现，请看js高级程序设计，或者自行百度。
这里提一下面试时经常会问到的问题，插入多个节点时，你是怎么插入的。如果你回答一个一个插入，那么每插入一次就会引起一次回流，插入100次，（面试官一般会说100，或者1000个节点的插入），就引起100次的回流，这势必让面试官觉得你连基本的东西都不懂，秒杀掉。
其实这时你应该用到的是文档碎片，先把新建的元素插入文档碎片中，然后再一次性的把文档碎片中的元素插入到页面中。不管添加多少个，只会引起一次回流。
节点的复制
cloneNode，复制节点，文档碎片对象也可以通过此方法复制。
但是IE6-IE8会自作多情的把节点上的attachEvent绑定的事件也一起复制。早些年，为了在IE6-IE8中不复制attachEvent事件，jQuery动用outerHTML复制节点。
另外，标准浏览器的cloneNode，只会复制元素写在标签内的属性与通过setAttribute设置的属性，而IE6-IE8还支持通过node.aaa = "xxx"，设置的属性复制。
IE6-IE8不能复制script节点的text属性。
IE6-IE8不能复制input和textarea标签的默认值。
IE6-IE8不能复制option节点的选中状态。
IE6-IE8不能复制checkbox和radio节点的选中状态。
IE6-IE7不能复制checkbox和radio节点的defaultChecked属性（就是没有这个属性了）。
所有浏览器会给没有value的checkbox一个默认的value值"on"，而chrome没有。
节点的移除
removeChild，创建Range对象选中目标节点然后deleteContents，textContent。
removeChild在ie6-7下有内存泄露问题.不仅跟垃圾回收有关还跟IE的DOM超空间有关。IE8尽管有DOM超空间，但是不会引起removeChild的内存泄露。
在IE6-IE8中存在一个DOM超空间的概念，当元素被移除DOM树，又有js关联时，元素不会消失，它被保存在一个叫做超空间的地方。可以用是否存在parentNode来判断元素是否在超空间。
举个例子：
var div = dcoument.createElement("div");
document.body.removeChild(documen.body.appendChild(div)); //appendChild返回新添加的节点
div.parentNode //IE6-8下会显示object，因为js中的div变量关联着这个div元素，所以它会存在DOM超空间中，所以它的parentNode存在。但是其他浏览器就显示null。
if(div.parentNode ) div.parentNode.nodeType //11 -> 文档碎片
因此IE6-IE8下，如果内存中出现很多这样的碎片，将会很容易造成内存泄露。IE8进行了优化，所以解决了removeChild内存泄露问题。
对于IE6-IE7删除节点的方法，可以使用innerHTML="";
举个例子：
var div = dcoument.createElement("div");
documen.body.appendChild(div);
documen.body.innerHTML = "";
div.parentNode //null，所有浏览器都是。
innerHTML 方式清除节点，不会弄到DOM超空间去。
但innerHTML删除节点，在IE6-8下也有个问题，
举一个例子：
<div id="test">test</div>
var div = dcoument.getElementById("test");
div.parentNode.removeChild(div);
console.log(div.id div.innerHTML) //test test 所有浏览器都是。
如果使用innerHTML ，
div.parentNode.innerHTML ="";
console.log(div.id div.innerHTML) //test test 标准浏览器。test "" IE6-IE8。
纯粹的js操作不会带来什么消耗，95%的消耗是DOM操作引起的。因此，我们在设置样式前，将元素移除DOM树，设置完后（因为设置的样式可能有多条，如果每条都会引起重绘甚至回流，那么性能会很差），再插回来（这样只会引起一次重绘或者回流）。因为对移除DOM树的元素进行操作，不会影响DOM树。
jQuery中，如果要实现以上功能，最好使用detach方法移除节点，因为此方法仅仅移除节点不会清除数据，而remove会清楚数据。（这里的数据是指jQuery本身的数据缓存系统中的数据）
下面介绍几种清空元素内部的API：node可以是元素节点或文档碎片对象
（1）while(node.firstChild) node.removeChild(node.firstChild)
（2）创建一个Range对象，设置边界（开始节点和结束节点），清空内容（边界里面的节点并且包括边界）。不支持ie8以及以下版本，
var deleteRange = document.createRange();
deleteRange.setStartBefore(node.firstChild);
deleteRange.setEndAfter(node.lastChild);
deleteRange.deleteContents();
（3）node.textContent = ""; textContent 是W3C版本的innerText（IE中的节点属性），不支持ie8以及以下版本 。
加油！
