本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
