快捷導(dǎo)航

javascript將DOM節(jié)點(diǎn)添加到文檔的方法實(shí)例分析

更新時(shí)間：2015年08月04日 15:57:44 作者：皮蛋

這篇文章主要介紹了javascript將DOM節(jié)點(diǎn)添加到文檔的方法,對(duì)比分析了javascript的兩種節(jié)點(diǎn)創(chuàng)建的方法,涉及javascript節(jié)點(diǎn)操作及運(yùn)行時(shí)間計(jì)算的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript將DOM節(jié)點(diǎn)添加到文檔的方法。分享給大家供大家參考。具體如下：

這里對(duì)兩種方法進(jìn)行了比較：第一種：先創(chuàng)建所有節(jié)點(diǎn)，再添加到文檔方式的運(yùn)行時(shí)長(zhǎng)；第二種：先向文檔添加一個(gè)空容器，然后每創(chuàng)建一個(gè)節(jié)點(diǎn)，再添加到容器中方式的運(yùn)行時(shí)長(zhǎng)，從測(cè)試來(lái)看，第二種方法優(yōu)于第一種！

運(yùn)行效果如下圖所示：

具體代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>將DOM節(jié)點(diǎn)添加到文檔實(shí)例</title>
</head>
<script type="text/javascript">
//第一種：先創(chuàng)建所有節(jié)點(diǎn)，再添加到文檔
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");
}
//第二種：先添加到文檔一個(gè)空容器，再創(chuàng)建所有接點(diǎn)，并分別添加到容器中
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");
}
//檢測(cè)輸入的數(shù)據(jù)是否正確
function checkData()
{
  var number=parseInt(document.getElementById("count").value);
  return number;
}
//調(diào)用createAdd()函數(shù)
function callCreateAdd()
{
  var count=checkData();
  createAdd(count);
}
//調(diào)用addCreate()函數(shù)
function callAddCreate()
{
  var count=checkData();
  addCreate(count);
}
</script>
<body>
<h3>將DOM節(jié)點(diǎn)添加到文檔實(shí)例</h3>
<hr style="border:1px solid #000000;" />
請(qǐng)輸入一個(gè)整數(shù)：
<input type="text" id="count" name="count" />
<br />
<input type="button" id="createadd" name="createadd" value="第一種：先創(chuàng)建所有節(jié)點(diǎn)，再添加到文檔方式的運(yùn)行時(shí)長(zhǎng)" onClick="callCreateAdd();" />
<input type="button" id="one" name="one" value="第二種：先向文檔添加一個(gè)空容器，然后每創(chuàng)建一個(gè)節(jié)點(diǎn)，再添加到容器中方式的運(yùn)行時(shí)長(zhǎng)" onClick="callAddCreate();" />
<br />
<div id="main" style="position:absolute;"></div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: