首頁 > 開發者 > JavaScript
javascript將DOM節點添加到文檔的方法執行個體分析，dom執行個體分析
本文執行個體講述了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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
