码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 文档碎片处理

时间:2014-06-15 17:25:07      阅读:1202      评论:0      收藏:0      [点我收藏+]

标签:jquery   文档碎片   

通过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 文档碎片处理,布布扣,bubuko.com

jQuery 文档碎片处理

标签:jquery   文档碎片   

原文地址:http://blog.csdn.net/lcstrive/article/details/30465737

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!