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 Event学习第十章 一些可替换的事件对
Feb 10 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
React forwardRef的使用方法及注意点
Jun 13 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递归json类实例
2014/12/02 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
直接有效的自我评价
2014/01/11 职场文书
经典商业广告词
2014/03/13 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA