通过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
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生