用法举例
createElement
var createElementEg = document.createELement('div');
// 添加元素方法1:innerHTML
createElementEg .innerHTML = '<span>this is createELement eg</span>';
var ele = document.getElementById('test');
// 添加元素方法2:appendChild
createElementEg.appendChild(ele);
- 1
- 2
- 3
- 4
- 5
- 6
createDocumentFragment
var createDocumentFragmentEg = document.createDocumentFragment();
var ele = document.getElementById('test');
// 添加元素方法2:appendChild
createDocumentFragmentEg.appendChild(ele);
- 1
- 2
- 3
- 4
共同点
- 添加子元素后返回值都是新添加的子元素,因此,可通过下面的方法利用
innerHTML
为createDocumentFragment
添加子元素:
var fragment = document.createDocumentFragment();
var ret = fragment.appendChild(document.createElement('div'));
ret.innerHTML = 'by innerHTML ';
test1.appendChild(fragment);
- 1
- 2
- 3
- 4
- 都可以通过
appendChild
添加子元素,且子元素必须是node
类型,不能为文本。 - 若添加的子元素是文档中存在的元素,则通过
appendChild
在为其添加子元素时,会从文档中删除之前存在的元素。
区别
createElement
创建的是元素节点,节点类型为1,createDocumentFragment
创建的是文档碎片,节点类型是11通过
createElement
新建元素必须指定元素tagName
,因为其可用innerHTML
添加子元素。通过createDocumentFragment
则不必。连续将通过
createElement
新建的元素添加到其他元素上,则只会将新建的元素添加到最后一个其他元素上,即下面的test2
上,程序会报错。
var createElement = document.createElement('div');
createElement.appendChild(textCreateElement);
test1.appendChild(createElement );
test2.appendChild(createElement );
- 1
- 2
- 3
- 4
- 而连续将通过
createDocumentFragment
新建的元素通过appendChild
添加到其他元素上,则只会将新建的元素添加到第一个其他元素上,即下面的test1
上,程序会报错。
var fragment = document.createDocumentFragment();
fragment.appendChild(testfragment);
test1.appendChild(fragment);
test2.appendChild(fragment);
- 1
- 2
- 3
- 4
- 通过
createElement
创建的元素是直接插入到文档中,而通过createDocumentFragment
创建的元素插入到文档中的是他的子元素。 - 通过
createElement
创建的元素插入文档后,还可以取到创建时的返回值,即上面例子中createElement
还是创建的那个div
元素,而createDocumentFragment
创建的元素插入到文档后,就不能访问创建时的返回值了,相当于把自己创建的文档片段直接挪到文档中了。
文章2:
在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);
(声明:这是我google的第一个例子,并不代表对原作者有任何意见,原文地址http://www.cnitblog.com/asfman/articles/32614.html)
这个说法并没有错,但是并不严谨,因为像这种用法,主要还是用在目标节点是已存在并且有一部分内容的情况下,比如上面例子中的body元素,如果目标节点并不存在或者为空,完全可以用createElement创建一个相同的元素,操作之后再使用一次appendChild或者replaceChild来达到相同的目的,这样也不存在重复刷新的问题。
虽说我平时都是把两者混着用,但是还是得明白两者之间的一点区别:
第一:
createElement创建的元素可以使用innerHTML,createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果,只是作为一个属性而已。两者的节点类型完全不同,并且createDocumentFragment创建的元素在文档中没有对应的标记,因此在页面上只能用js中访问到。
demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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>
</div>