[转]createElement与createDocumentFragment的点点差别

最新推荐文章于 2024-10-12 10:41:56 发布

ywxowen999

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量170

点赞数

分类专栏： javaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/ywxowen999/article/details/84286143

版权

javaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在DOM操纵里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。

网上可以搜到的大项目组都是说应用createDocumentFragment主如果因为避免因createElement多次添加到document.body引起的效力题目，比如：


	var arrText=["1","2","3","4","5","6","7","8","9","10"];
	for(var i=0;i<arrText.length;i++){    
		var op=document.createElement()"P");   
		var oText=document.createTextNode(arrText[i]);    
		op.appendChild(oText);    
		document.body.appendChild(op);
	}
	var arrText=["1","2","3","4","5","6","7","8","9","10"];
	var oFrag=document.createDocumentFragment();
	for(var i=0;i<arrText.length;i++){
		var op=document.createElement("P");    
		var oText=document.createTextNode(arrText[i]);    
		op.appendChild(oText);    
		oFrag.appendChild(op);    
	}
	document.body.appendChild(oFrag);

这个说法并没有错，然则并不严谨，因为像这种用法，首要还是用在目标节点是已存在并且有一项目组内容的景象下，比如上方例子中的body元素，若是目标节点并不存在或者为空，完全可以用createElement创建一个雷同的元素，操纵之后再应用一次appendChild或者replaceChild来达到雷同的目标，如许也不存在反复刷新的题目。

虽说我日常平凡都是把两者混着用，然则还是得熟悉打听两者之间的一点差别：

第一：
createElement创建的元素可以应用innerHTML，createDocumentFragment创建的元素应用innerHTML并不克不及达到预期批改文档内容的结果，只是作为一个属性罢了。两者的节点类型完全不合，并且createDocumentFragment创建的元素在文档中没有对应的标识表记标帜，是以在页面上只能用js中接见到。

demo：


<!DOCTYPE html>
<html>
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
		<title></title>    
		<style type="text/css">        
			#outer{ height: 200px; border: 1px solid #006400;}    
		</style>
	</head>
	<body>
		<div id="outer"></div>
		<input type="button" value="createElement" id="btn_1"/>
		<input type="button" value="createDocumentFragment" id="btn_2"/>
		<script type="text/javascript">
			var fragment_1 = document.createDocumentFragment();
			fragment_1.innerHTML = "<p>我是一个粉刷匠</p>";
			document.body.appendChild(fragment_1);    
			var fragment_2 = document.createElement("p");        
			fragment_2.innerHTML = "粉刷本领强";        
			document.body.appendChild(fragment_2);
		</script>
	</body>
</html>

第二：另一个最首要的差别就是createElement创建的元素可以反复操纵，添加之后就算从文档里面移除依旧归文档所有，可以持续操纵，然则createDocumentFragment创建的元素是一次性的，添加之后再就不克不及操纵了（申明：这里的添加并不是添加了新创建的片段，因为上方说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。

一个对比的例子：


<!DOCTYPE html>
<html>
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
		<title></title>    
		<style type="text/css">        
			#outer{ height: 200px; border: 1px solid #006400;}    
		</style>
	</head>
	<body>
		<div id="outer"></div>
		<input type="button" value="createElement" id="btn_1"/>
		<input type="button" value="createDocumentFragment" id="btn_2"/>
		<script type="text/javascript">    
		function $(id){        
			return document.getElementById(id);    
		}    
		var outer = $("outer");
		var inner = $("inner");     
		$("btn_1").onclick = function(){        
			var div = document.createElement("div");
			div.innerHTML = "<p>测试createElement</p>";        
			document.body.appendChild(div);        
			setTimeout(function(){
				outer.appendChild(div);
				setTimeout(function(){
					outer.removeChild(div);            
					},1000)
				},1000)
		}    
		$("btn_2").onclick = function(){        
			var p = document.createElement('p');            
			p.innerHTML = "测试DocumentFragment";        
			var fragment = document.createDocumentFragment();            
			fragment.appendChild(p);            
			fragment.innerHTML = "<p>测试DocumentFragment</p>";            
			fragment.innerHTML = "<span>测试DocumentFragment</span>";        
			document.body.appendChild(fragment);        
			setTimeout(function(){
				outer.appendChild(fragment);//报错,因为此时文档内部已经可以或许不存在fragment了           
				setTimeout(function(){
					outer.removeChild(fragment);            
				},1000)  
			},1000）    
		}
		</script>
	</body>
</html>