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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
原生javascript实现分页效果
Apr 21 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
javascript实现拼图游戏
Jan 29 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python中logging库的使用总结
2017/10/18 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
设置python3为默认python的方法
2018/10/31 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
python中加背景音乐如何操作
2020/07/19 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
高中校园广播稿
2014/01/11 职场文书
护理职业生涯规划书
2014/01/24 职场文书
测量工程专业求职信
2014/02/24 职场文书
学历公证书范本
2014/04/09 职场文书
买房协议书
2014/04/11 职场文书
大学学风建设方案
2014/05/04 职场文书
省文明单位申报材料
2014/05/08 职场文书
关于爱国的标语
2014/06/24 职场文书
小学教师求职信范文
2015/03/20 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers