[b]1.innerHTML[/b]
通过div.innerHTML提取出节点,然后转移到文档碎片上,然后用insertBefore与appendChild插入节点。
[b]注意[/b]:IE的col,colgroup,frameset,html,head,style,title,table,tbody,tfoot,thead,tr的innerHTML属性是只读的
[b]2.createContextualFragment[/b]
innerHTML方式需要先创建一个多余的div元素做转换器,然后再使用createDocumentFragment创建一个文档碎片,把所有节点转移过去。如果使用createContextualFragment就可以避免这一步了。
不过从性能来看,在Chrome和FF5运行,第一种方式更快,而在opera和safari运行,第二种更快
但是呢,如果需要创建的元素只是简单的一个<div>111</div>,我的测试结果是只有1-2个元素时,用createElement + createTextNode稍快些,大于2个元素时,上述方法的优势就越发明显了
var div = document.createElement('div'),
fragment = document.createDocumentFragment(),
str = '<div><h1>11</h1><ul><li>1</li><li>2</li></ul></div>',
node;
div.innerHTML = str;
while((node = div.firstChild)){
fragment.appendChild(node);
}
通过div.innerHTML提取出节点,然后转移到文档碎片上,然后用insertBefore与appendChild插入节点。
[b]注意[/b]:IE的col,colgroup,frameset,html,head,style,title,table,tbody,tfoot,thead,tr的innerHTML属性是只读的
[b]2.createContextualFragment[/b]
var range = document.createRange(),
str = '<div><h1>11</h1><ul><li>1</li><li>2</li></ul></div>';
range.selectNodeContents(document.documentElement);
var fragment = range.createContextualFragment(str);
innerHTML方式需要先创建一个多余的div元素做转换器,然后再使用createDocumentFragment创建一个文档碎片,把所有节点转移过去。如果使用createContextualFragment就可以避免这一步了。
不过从性能来看,在Chrome和FF5运行,第一种方式更快,而在opera和safari运行,第二种更快
但是呢,如果需要创建的元素只是简单的一个<div>111</div>,我的测试结果是只有1-2个元素时,用createElement + createTextNode稍快些,大于2个元素时,上述方法的优势就越发明显了