[转]createElement与createDocumentFragment的点点差别
在DOM操纵里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。
网上可以搜到的大项目组都是说应用createDocumentFragment主如果因为避免因createElement多次添加到document.body引起的效力题目，比如：
这个说法并没有错，然则并不严谨，因为像这种用法，首要还是用在目标节点是已存在并且有一项目组内容的景象下，比如上方例子中的body元素，若是目标节点并不存在或者为空，完全可以用createElement创建一个雷同的元素，操纵之后再应用一次appendChild或者replaceChild来达到雷同的目标，如许也不存在反复刷新的题目。
虽说我日常平凡都是把两者混着用，然则还是得熟悉打听两者之间的一点差别：
第一：
createElement创建的元素可以应用innerHTML，createDocumentFragment创建的元素应用innerHTML并不克不及达到预期批改文档内容的结果，只是作为一个属性罢了。两者的节点类型完全不合，并且createDocumentFragment创建的元素在文档中没有对应的标识表记标帜，是以在页面上只能用js中接见到。
demo：
第二：另一个最首要的差别就是createElement创建的元素可以反复操纵，添加之后就算从文档里面移除依旧归文档所有，可以持续操纵，然则createDocumentFragment创建的元素是一次性的，添加之后再就不克不及操纵了（申明：这里的添加并不是添加了新创建的片段，因为上方说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。
一个对比的例子：
来源： http://www.mysjtu.com/page/M0/S660/660001.html
END
网上可以搜到的大项目组都是说应用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