javascript 增加元素用DocumentFragment来增加元素

最新推荐文章于 2024-02-05 23:04:19 发布

Abudula__

最新推荐文章于 2024-02-05 23:04:19 发布

阅读量943

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Abudula__/article/details/82928168

版权

Javascript 专栏收录该内容

21 篇文章

订阅专栏

插入节点

我们想要插入单个节点的时候可以使用insertBefore()和appendChild()方法，如果我们想要插入多个内容的话，就需要使用DocumentFragment。不停的循环使用插入方法是一种策略，但这样的话浏览器会不停的渲染DOM树，会影响用户体验。

DocumentFragment，中文为文档片段，可以理解为轻量级的节点，可以往里面添加多个子元素。NodeType=11,NodeName=#document-fragment,作为仓库来使用，通常在DOM树看不到，是隐藏的。如果我们想要增加多个元素的时候临时的全部存放到这个仓库里面，存好以后一次性的拿出来塞到DOM树里面，这样就不会重复渲染页面了。

也就是一句话的话，就是为了一次性解决，临时找个地方存放我们想要增加的节点，这个地方就是DocumentFragment.

这个代码给了不用fragment增加节点和用fragment增加节点的方法，并给了注释。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>Dom的新增和删除实例</h1>
		<ul>
			<li>新增一个元素</li>
			<li>新增多个元素</li>
			<li>删除一个元素</li>
			<li>删除多个元素</li>
		</ul>
		<script>
			var h2=document.createElement('h2');
			var h2text=document.createTextNode('OS 列表');
			h2.appendChild(h2text);
			document.body.appendChild(h2);
			
			var ul=document.createElement('ul');
			/*var li=document.createElement('li');    //单个创建的方法
			var litext=document.createTextNode('windows');
			li.appendChild(litext);
			ul.appendChild(li);
			document.body.appendChild(ul);*/
			
			var oslist=['windows','mac','linux'];
			for(var i=0,len=oslist.length;i<len;i++)
			{
				var li=document.createElement('li');
				var litext=document.createTextNode(oslist[i]);
				li.appendChild(litext);
				ul.appendChild(li);     //因为ul在Dom里面，会频繁更新，会影响用户体验。
			}
			document.body.appendChild(ul);
			 
			 
			var ul=document.createElement('ul');
			var oslist=['windows','linux','mac'];
			var frag=document.createDocumentFragment();
			for(var i=0,len=oslist.length;i<len;i++)
			{
				var li=document.createElement('li');
				var litext=document.createTextNode(oslist[i]);
				li.appendChild(litext);
				frag.appendChild(li);    //frag不在DOM里面，不会频繁更新。
			}
			ul.appendChild(frag);
			document.body.appendChild(ul);
		</script>
	</body>
</html>