javascript将DOM节点添加到文档的方法实例分析
更新时间：2015年08月04日 15:57:44 作者：皮蛋
这篇文章主要介绍了javascript将DOM节点添加到文档的方法,对比分析了javascript的两种节点创建的方法,涉及javascript节点操作及运行时间计算的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要介绍了js定义类的方法,结合实例形式分析了javascript ES5与ES6标准下类的定义方法,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了Redux的基本使用过程详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了js实现自定义下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了js实现跨域的方法,实例分析了几种常用的javascript实现跨域的技巧,需要的朋友可以参考下2015-06-06
javascript中日期转换成时间戳的小例子，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了js贪心算法 钱币找零问题代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
解析javascript系统错误：-1072896658的解决办法
问题出现在用到ajax的场合。昨天还正常的程序，今天运行就有javascript系统错误：-1072896658的2013-07-07
这篇文章为大家推荐了许多经典的JS闭包面试题，也可以说是一不小心就做错的JS闭包面试题，感兴趣的小伙伴们可以参考一下，自己试着解答这些大部分人都会做错的JS闭包面试题，检验自己的知识水平2015-11-11
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
cookie是网站设计者放置在客户端（浏览器）的小文本文件，cookie不仅能够实现保存密码功能，还可以通过cookie保存最近浏览记录增加用户体验。本文给大家介绍js使用cookie实现记住密码功能及cookie相关函数讲解，感兴趣的朋友一起看看吧2016-11-11
由于微信限制一个服务号只能配置一个网页授权域名， 又不可能给每个环境单独配一个服务号，这样不仅需要成本而且很浪费资源，下面小编给大家带来了解决一个微信号同时支持多个环境网页授权问题，感兴趣的朋友一起看看吧2019-08-08
最新评论