Beispielanalyse der Methode zum Hinzufügen von DOM-Knoten zum Dokument mithilfe von Javascript-js-Tutorial-php.cn

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

PHPz

Freigeben： 2018-09-29 12:52:21

Original

1315 Leute haben es durchsucht

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>

Nach dem Login kopieren

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