[转]createElement与createDocumentFragment的点点差异

2012-11-23

[转]createElement与createDocumentFragment的点点差别在DOM操纵里，createElement是创建一个新的节点，crea

[转]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

热点排行

Web前端

[转]createElement与createDocumentFragment的点点差异