document.createElement()和document.createDocumentFragment()的比较

我在上一篇文章js中DOM操作复习总结中提到了：document.createElement()和document.createDocumentFragment()，虽说我们平时可以把两者混着用，但是还是得明白两者之间的区别：

一.在DOM操作中document.createElement()每次创建的都是一个DOM节点，所以每次都要执行把节点添加到document.body(或其后的节点)中的操作，这样对于一个小程序运行时没有问题的，但如果他调用了十次甚至一百次一千次document.body.appendChild()，每次都要产生一次页面刷新，这样就会产生很多页面碎片，而此时就体现出了document.createDocumentFragment()的重要性。

document.createDocumentFragment()是创建一个文档片段，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，这样不管要添加多少个节点都只需要最后添加的时候调用一次，这意味着只需要进行一次页面的刷新，需要的时间显然会比前面的要少。

eg：第一段代码用document.createElement()来实现，如下：

for(var i = 0 ; i < 10; i ++) {

var p = document.createElement("p");

var oTxt = document.createTextNode("段落" + i);

p.appendChild(oTxt);

document.body.appendChild(p);

}

第二段代码用document.createDocumentFragment()来实现，如下：

var oFragment = document.createDocumentFragment();

for(var i = 0 ; i < 10; i ++) {

var p = document.createElement("p");

var oTxt = document.createTextNode("段落" + i);

p.appendChild(oTxt);

oFragment.appendChild(p);

}

document.body.appendChild(oFragment);

很明显可以验证第二种方法比第一种方法节省时间

二.reateElement创建的元素可以使用innerHTML，createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果，只是作为一个属性而已。两者的节点类型完全不同，并且createDocumentFragment创建的元素在文档中没有对应的标记，因此在页面上只能用js中访问到

三.另一个最主要的区别就是createElement创建的元素可以重复操作，添加之后就算从文档里面移除依旧归文档所有，可以继续操作，但是createDocumentFragment创建的元素是一次性的，添加之后再就不能操作了（说明：这里的添加并不是添加了新创建的片段，因为上面说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。