通过JS操作DOM节点可能以节点为单位进行,比如添加节点,可以createElement,createTextNode,然后用appendChild把文本节点和容器节点绑定在一起,然后再用appendChild或insertBefor添加到DOM树中.但如果要往DOM树中动态添加大量的节点.就会很麻烦.而且每次都会刷新DOM，造成性能上的缺陷。
解决方法是使用文档碎片这个方法创建文档碎片。
我个人觉得应该把这个翻译成文档片段比较合适。
使用jQuery解决方案。
<span style="font-family:FangSong_GB2312;font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<ul>
</ul>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var arr = ["baidu","sina","telcent","ali"];
var fragment = document.createDocumentFragment();
$.each(arr,function(i,item){
var newItem = $("<li>"+item+"</li>")[0];
fragment.appendChild(newItem);
});
$("ul")[0].appendChild(fragment);
</script>
</body>
</html></span><span style="font-family:FangSong_GB2312;font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<ul>
</ul>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var arr = ["baidu","sina","telcent","ali"];
var html = "";
$.each(arr, function(index, val) {
html += "<li>" + val + "</li>";
});
$('ul').html(html);
</script>
</body>
</html></span>当然,你也可以建个新的节点,比如说div,先将oP添加到div上,然后再将div添加到body中.但这样要在body中多添加一个<div></div>.但文档碎片不会产生这种节点.
注意:绑定碎片实际上是把碎片的内容附加到被绑定节点下面.并不会产生类似<fragment></fragement>的节点;
Best Wishes .
原文：http://blog.csdn.net/lcstrive/article/details/30465737