將DOM節(jié)點添加到文檔實例_綜合其它特效

將DOM節(jié)點添加到文檔實例，這里對兩種方法進行了比較：第一種：先創(chuàng)建所有節(jié)點，再添加到文檔方式的運行時長；第二種：先向文檔添加一個空容器，然后每創(chuàng)建一個節(jié)點，再添加到容器中方式的運行時長，從測試來看，第二種方法優(yōu)于第一種！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>將DOM節(jié)點添加到文檔實例-hl5o.cn</title>
</head>
<script type="text/javascript">
//第一種：先創(chuàng)建所有節(jié)點，再添加到文檔
function createAdd(count)
{
	var start=new Date();
	var container=document.createElement("div");
	var obj=document.getElementById("main");
	for(var i=0;i<count;i++)
	{
		var node=document.createElement("div");
		node.style.position="absolute";
		node.style.left=(6+parseInt(Math.random()*100))+"px";
		node.style.top=(6+parseInt(Math.random()*100))+"px";
		container.appendChild(node);
	}
	obj.appendChild(container);
	var end=new Date();
	var duration=end-start;
	alert("第一種方式："+duration+"ms");
}
//第二種：先添加到文檔一個空容器，再創(chuàng)建所有接點，并分別添加到容器中
function addCreate(count)
{
	var start=new Date();
	var container=document.createElement("div");
	var obj=document.getElementById("main");
	obj.appendChild(container);
	for(var i=0;i<count;i++)
	{
		var node=document.createElement("div");
		node.style.position="absolute";
		node.style.left=(6+parseInt(Math.random()*100))+"px";
		node.style.top=(6+parseInt(Math.random()*100))+"px";
		container.appendChild(node);	
	}
	var end=new Date();
	var duration=end-start;
	alert("第二種方式："+duration+"ms");
}

//檢測輸入的數(shù)據(jù)是否正確
function checkData()
{
	var number=parseInt(document.getElementById("count").value);

return number;
}
//調(diào)用createAdd()函數(shù)
function callCreateAdd()
{
		var count=checkData();
		createAdd(count);
}
//調(diào)用addCreate()函數(shù)
function callAddCreate()
{
		var count=checkData();
		addCreate(count);
}
</script>
<body>
<h3>將DOM節(jié)點添加到文檔實例</h3>
<hr style="border:1px solid #000000;" />
請輸入一個整數(shù)：
<input type="text" id="count" name="count"  />
<br />
<input type="button" id="createadd" name="createadd" value="第一種：先創(chuàng)建所有節(jié)點，再添加到文檔方式的運行時長" onClick="callCreateAdd();" />
<input type="button" id="one" name="one" value="第二種：先向文檔添加一個空容器，然后每創(chuàng)建一個節(jié)點，再添加到容器中方式的運行時長" onClick="callAddCreate();" />
<br />
<div id="main" style="position:absolute;"></div>
</body>
</html>

所屬頻道：綜合其它特效/更新時間：2013-04-30

[收藏][報錯][返回列表]

相關(guān)綜合其它特效：

綜合其它特效Rss訂閱特效代碼搜索

綜合其它特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索將DOM節(jié)點添加到文檔實例
特效說明：
綜合其它模板-將DOM節(jié)點添加到文檔實例。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

將DOM節(jié)點添加到文檔實例_綜合其它特效

綜合其它特效Rss訂閱特效代碼搜索

綜合其它特效推薦

猜你也喜歡看這些