本文实例讲述了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程序设计有所帮助。
新闻热点
疑难解答
