[转]createElement与createDocumentFragment的点点差别

ywxowen999

浏览: 23636 次
性别:
来自: 吉林

最近访客更多访客>>

chenkechao

duna_ncw

eyeityou

wuhuidelang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

在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>

来源：http://www.mysjtu.com/page/M0/S660/660001.html
END

分享到：

open-flash-chart 2 | 一段优美的正则

2012-09-08 21:33
浏览 2581
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论