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


Posted in Javascript onAugust 04, 2015

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

Javascript 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
js实现进度条的方法
Feb 13 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
利用js实现简单开关灯代码
Nov 23 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 #Javascript
JS实现转动随机数抽奖特效代码
Apr 16 #Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 #Javascript
jquery控制显示服务器生成的图片流
Aug 04 #Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 #Javascript
用js编写的简单的计算器代码程序
Aug 04 #Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 #Javascript
You might like
php foreach、while性能比较
2009/10/15 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php实现的短网址算法分享
2014/06/20 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python字符串常用方法
2018/06/14 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
python zip()函数的使用示例
2020/09/23 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
高中数学教师求职信
2013/10/30 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers