将DOM节点添加到文档实例_综合其它特效

缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!

将DOM节点添加到文档实例，这里对两种方法进行了比较：第一种：先创建所有节点，再添加到文档方式的运行时长；第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长，从测试来看，第二种方法优于第一种！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>将DOM节点添加到文档实例-www.mb5u.com</title>
</head>
<script type="text/javascript">
//第一种：先创建所有节点，再添加到文档
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");
}
//第二种：先添加到文档一个空容器，再创建所有接点，并分别添加到容器中
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");
}

//检测输入的数据是否正确
function checkData()
{
	var number=parseInt(document.getElementById("count").value);

return number;
}
//调用createAdd()函数
function callCreateAdd()
{
		var count=checkData();
		createAdd(count);
}
//调用addCreate()函数
function callAddCreate()
{
		var count=checkData();
		addCreate(count);
}
</script>
<body>
<h3>将DOM节点添加到文档实例</h3>
<hr style="border:1px solid #000000;" />
请输入一个整数：
<input type="text" id="count" name="count"  />
<br />
<input type="button" id="createadd" name="createadd" value="第一种：先创建所有节点，再添加到文档方式的运行时长" onClick="callCreateAdd();" />
<input type="button" id="one" name="one" value="第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长" onClick="callAddCreate();" />
<br />
<div id="main" style="position:absolute;"></div>
</body>
</html>

所属频道：综合其它特效/更新时间：2013-04-30

[收藏][报错][返回列表]

评论加载中....

将DOM节点添加到文档实例_综合其它特效

综合其它特效Rss订阅特效代码搜索

综合其它特效推荐

猜你也喜欢看这些

闂佽　鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷

将DOM节点添加到文档实例_综合其它特效

综合其它特效Rss订阅特效代码搜索

综合其它特效推荐

猜你也喜欢看这些

闂佽 鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷

闂佽　鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷