javascript將DOM節點添加到文檔的方法實例分析
編輯：關於JavaScript
本文實例講述了javascript將DOM節點添加到文檔的方法。分享給大家供大家參考。具體如下：
這裡對兩種方法進行了比較：第一種：先創建所有節點，再添加到文檔方式的運行時長；第二種：先向文檔添加一個空容器，然後每創建一個節點，再添加到容器中方式的運行時長，從測試來看，第二種方法優於第一種！
運行效果如下圖所示：
具體代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>將DOM節點添加到文檔實例</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>
希望本文所述對大家的javascript程序設計有所幫助。
小編推薦
熱門推薦