当我将div附加到现有div时获得无限循环？

Question

我在网上进行了一些程序测试,从那里我得到了一些无限循环错误,将新div添加到现有div中.

<div id="one">
    <div id="two"></div>
</div>

这个JS代码是添加新的div:

appendChildren();
function appendChildren() {
    var allDivs = document.getElementsByTagName("div");  
    for (var i = 0; i < allDivs.length; i++) {
        var newDiv = document.createElement("div");   
        allDivs[i].appendChild(newDiv);
        console.log(allDivs[i]);
    }  
}

我希望HTML看起来像这样:

<div id="one">
    <div id="two">   
        <div></div>
    </div>
    <div></div>
</div>

但在运行时,程序不会停止循环.为什么？我猜不出来!那么我可以appendChildren()只运行一次还是有另一种解决方案？

Answer 1

document.getElementsByTagName("div")是一个实时收藏 - 它总是反映实际数据.
这意味着当您追加div项目时,它会自动附加到您的集合中.所以,它永远不会结束.

您可以使用[].slice.call它来复制您的集合,以便它不会更改.

这是工作演示片段:

function appendChildren() {
  var allDivs = [].slice.call(document.getElementsByTagName("div"));  
  for (var i = 0; i < allDivs.length; i++) {
    var newDiv = document.createElement("div");   
    allDivs[i].appendChild(newDiv);
    console.log(allDivs[i]);
  }  
}

appendChildren();

// For demonstration purposes only:
document.getElementById('html').innerText = document.getElementById('one').outerHTML;

<div id="one">
   <div id="two">    
   </div>
</div>

<pre id="html"></pre>

该html元素显示HTML结果 - 但是,它看起来很糟糕.您可以使用开发人员工具以熟悉的方式查看实际结构.