主页 / 网络编程 /

javascript将DOM节点添加到文档的方法实例分析

网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了javascript将DOM节点添加到文档的方法,对比分析了javascript的两种节点创建的方法,涉及javascript节点操作及运行时间计算的相关技巧,需要的朋友可以参考下

本文实例讲述了javascript将DOM节点添加到文档的方法。分享给大家供大家参考。具体如下

这里对两种方法进行了比较第一种先创建所有节点，再添加到文档方式的运行时长；第二种先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长，从测试来看，第二种方法优于第一种！

运行效果如下图所示

具体代码如下

<html xmlns="http://.w3./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.=(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.=(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使用encodeURI()和decodeURI()获取字符串值的方 下一篇：JavaScript实现添加及删除事件的方法小结

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by