suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispielanalyse der Methode zum Hinzufügen von DOM-Knoten zum Dokument mithilfe von Javascript

Beispielanalyse der Methode zum Hinzufügen von DOM-Knoten zum Dokument mithilfe von Javascript

PHPz
PHPzOriginal
2016-05-16 15:47:091292Durchsuche

Dieser Artikel stellt hauptsächlich die Methode zum Hinzufügen von DOM-Knoten zu Dokumenten in JavaScript vor und vergleicht und analysiert die beiden Methoden zur Knotenerstellung in JavaScript, einschließlich verwandter Techniken des JavaScript-Knotenbetriebs und der Laufzeitberechnung. Freunde in Not können sich darauf beziehen . Die Details sind wie folgt:

Hier werden zwei Methoden verglichen: die erste: Erstellen Sie zuerst alle Knoten und fügen Sie sie dann zur Laufzeit des Dokuments hinzu Das Dokument und dann jedes hinzufügen. Die Laufzeit zum Erstellen eines Knotens und zum anschließenden Hinzufügen zum Container. Aus Testsicht ist die zweite Methode besser als die erste!

Der Betriebseffekt ist in der folgenden Abbildung dargestellt:

Der spezifische Code lautet wie folgt: 

<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>

Das Obige ist Den gesamten Inhalt dieses Kapitels und weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-Methode zur Verwendung des FileSystemObject-Objekts zum Schreiben des Inhalts einer Textdatei_Javascript-FähigkeitenNächster Artikel：JavaScript-Methode zur Verwendung des FileSystemObject-Objekts zum Schreiben des Inhalts einer Textdatei_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen