HTML字符串动态生成节点

[b]1.innerHTML[/b]

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个元素时，上述方法的优势就越发明显了