45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:javascript如何把DOM节点添加到文档?

javascript如何把DOM节点添加到文档?

2015-08-23 16:18:07 来源:www.45fan.com 【

javascript如何把DOM节点添加到文档?

本文实例讲述了javascript将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程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/18637.html
Tags: JavaScript DOM 节点
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部