jQuery 文档碎片处理

浏览数：17 / 时间：2015年06月09日

通过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 .

jQuery 文档碎片处理,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery 文档碎片处理