javascript将DOM节点添加到文档的方法实例分析-js教程-PHP中文网

首页

web前端

js教程

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

PHPz

May 16, 2016 pm 03:47 PM

javascript 添加

这篇文章主要介绍了javascript将DOM节点添加到文档的方法，对比分析了javascript的两种节点创建的方法，涉及javascript节点操作及运行时间计算的相关技巧，需要的朋友可以参考下，具体如下：

这里对两种方法进行了比较：第一种：先创建所有节点，再添加到文档方式的运行时长；第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长，从测试来看，第二种方法优于第一种！

运行效果如下图所示：

具体代码如下：

<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("p");
  var obj=document.getElementById("main");
  for(var i=0;i<count;i++)
  {
    var node=document.createElement("p");
    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("p");
  var obj=document.getElementById("main");
  obj.appendChild(container);
  for(var i=0;i<count;i++)
  {
    var node=document.createElement("p");
    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 />
<p id="main" style="position:absolute;"></p>
</body>
</html>

登录后复制

以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7684

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

win11添加新硬盘教程 Jan 05, 2024 am 09:39 AM

在购买电脑的时候，不一定会选择很大的硬盘，这时候如果我们想在win11添加新硬盘，可以先安装购买的新硬盘，然后在电脑里添加分区就可以了。win11添加新硬盘教程：1、首先，我们拆开主机，找到硬盘的插槽。2、找到后，我们先接上“数据线”，一般会有防呆设计，插不进去反个方向即可。3、随后将新的硬盘插入硬盘插槽。4、插入后，将数据线的另一头接到电脑的主板上。5、安装完成后，就可以装回主机，并开机了。6、开机后，我们右键“此电脑”，打开“计算机管理”7、打开后，点击左下角的“磁盘管理”8、随后在右边可以

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

米家怎么添加电视 Mar 25, 2024 pm 05:00 PM

很多用户们在现代生活中越来越青睐小米智能家居互联的电子生态，那么连接米家APP后，你就可以轻松用手机来控制连接设备，但是很多用户们还不知如何将自己的家居添加米家app中，那么这篇教程攻略就将为大家带来具体连接方法步骤攻略，希望能帮助到各位有需要的小伙伴们。1、下载米家APP后，创建或者登录小米账户。2、添加方法：当全新的设备通电后，将手机靠近设备并打开小米电视，正常情况下会弹出连接提示，选择“确定”即进入设备连接流程。若无提示弹出，也可以手动添加设备，方法是：进入智能家庭APP后，点击左下方第1

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

Win11快速创建桌面快捷方式的教程 Dec 27, 2023 pm 04:29 PM

在win11中，我们可以通过添加桌面快捷方式的方法在桌面上快速启动软件或文件，而且只需要右键需要的文件就可以操作了。win11添加桌面快捷方式：1、打开“此电脑”，找到你想要添加桌面快捷方式的文件或软件。2、找到后，右键选中它，点击“显示更多选项”3、再选择“发送到”-“桌面快捷方式”4、操作完成后，就可以在桌面上找到快捷方式了。

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

Tampermonkey怎么添加新脚本-Tampermonkey怎么删除脚本 Mar 18, 2024 pm 12:10 PM

Tampermonkey油猴Chrome扩展是一款用户脚本管理插件，通过脚本提高了用户的效率和浏览体验，那么Tampermonkey怎么添加新脚本？怎么删除脚本呢？下面就让小编给大家解答下吧!Tampermonkey怎么添加新脚本：1、这里拿GreasyFork来举例子，打开GreasyFork网页，输入要按照的脚本，小编这里选择的一键离线下载2、选择一个脚本，进入脚本页面后可以看到安装此脚本的按钮3、点击安装此脚本，来到安装界面。这里点击安装就可以了4、我们可以在以安装的脚本中看到安装好的一键

在MetaMask钱包中如何连接到Polygon网络？MetaMask钱包连接到Polygon网络的教程指南 Jan 19, 2024 pm 04:36 PM

如何添加PolygonMainnet网络要将MATIC（Polygon）与Metamask链接使用，您需要添加一个名为“PolygonMainnet”的专用网络。使用错误的网络地址进行转入会导致出现问题，所以在转出$MATIC之前，请务必使用“PolygonMainnet”网络。Metamask钱包默认连接到以太坊主网，但是我们可以很简单地添加“PolygonMainnet”并使用$MATIC。只需简单的复制和粘贴几个步骤，就能完成。首先，在Metamask钱包中，点击右上角的网络选项，选择“C

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题