本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
- 基于JavaScript创建动态Dom
- JS动态创建DOM元素的方法
- javascript实现dom动态创建省市纵向列表菜单的方法
- 通过JS动态创建一个html DOM元素并显示
- JavaScript与DOM组合动态创建表格实例
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
- javascript转换字符串为dom对象(字符串动态创建dom)
- javascript DOM操作之动态删除TABLE多行
- js操作DOM--添加、删除节点的简单实例
- JavaScript DOM节点添加示例
- JS实现动态添加DOM节点和事件的方法示例