[转]createElement与createDocumentFragment的点点差别
在DOM操纵里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。
网上可以搜到的大项目组都是说应用createDocumentFragment主如果因为避免因createElement多次添加到document.body引起的效力题目，比如：
var arrText=["1","2","3","4","5","6","7","8","9","10"];for(var i=0;i<arrText.length;i++){ var op=document.createElement()"P"); var oText=document.createTextNode(arrText[i]); op.appendChild(oText); document.body.appendChild(op);}var arrText=["1","2","3","4","5","6","7","8","9","10"];var oFrag=document.createDocumentFragment();for(var i=0;i<arrText.length;i++){var op=document.createElement("P"); var oText=document.createTextNode(arrText[i]); op.appendChild(oText); oFrag.appendChild(op); }document.body.appendChild(oFrag);这个说法并没有错，然则并不严谨，因为像这种用法，首要还是用在目标节点是已存在并且有一项目组内容的景象下，比如上方例子中的body元素，若是目标节点并不存在或者为空，完全可以用createElement创建一个雷同的元素，操纵之后再应用一次appendChild或者replaceChild来达到雷同的目标，如许也不存在反复刷新的题目。
虽说我日常平凡都是把两者混着用，然则还是得熟悉打听两者之间的一点差别：
第一：
createElement创建的元素可以应用innerHTML，createDocumentFragment创建的元素应用innerHTML并不克不及达到预期批改文档内容的结果，只是作为一个属性罢了。两者的节点类型完全不合，并且createDocumentFragment创建的元素在文档中没有对应的标识表记标帜，是以在页面上只能用js中接见到。
demo：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #outer{ height: 200px; border: 1px solid #006400;} </style></head><body><div id="outer"></div><input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/><script type="text/javascript">var fragment_1 = document.createDocumentFragment();fragment_1.innerHTML = "<p>我是一个粉刷匠</p>";document.body.appendChild(fragment_1); var fragment_2 = document.createElement("p"); fragment_2.innerHTML = "粉刷本领强"; document.body.appendChild(fragment_2);</script></body></html>第二：另一个最首要的差别就是createElement创建的元素可以反复操纵，添加之后就算从文档里面移除依旧归文档所有，可以持续操纵，然则createDocumentFragment创建的元素是一次性的，添加之后再就不克不及操纵了（申明：这里的添加并不是添加了新创建的片段，因为上方说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。
一个对比的例子：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #outer{ height: 200px; border: 1px solid #006400;} </style></head><body><div id="outer"></div><input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/><script type="text/javascript"> function $(id){ return document.getElementById(id); } var outer = $("outer");var inner = $("inner"); $("btn_1").onclick = function(){ var div = document.createElement("div");div.innerHTML = "<p>测试createElement</p>"; document.body.appendChild(div); setTimeout(function(){outer.appendChild(div);setTimeout(function(){outer.removeChild(div); },1000)},1000)} $("btn_2").onclick = function(){ var p = document.createElement('p'); p.innerHTML = "测试DocumentFragment"; var fragment = document.createDocumentFragment(); fragment.appendChild(p); fragment.innerHTML = "<p>测试DocumentFragment</p>"; fragment.innerHTML = "<span>测试DocumentFragment</span>"; document.body.appendChild(fragment); setTimeout(function(){outer.appendChild(fragment);//报错,因为此时文档内部已经可以或许不存在fragment了 setTimeout(function(){outer.removeChild(fragment); },1000) },1000） }</script></body></html>来源：http://www.mysjtu.com/page/M0/S660/660001.html
END