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

$ make cc tests.c -o tests ./tests cc realproduct.c -o realproduct是一个实时收藏 - 它总是反映实际数据这意味着当您追加document.getElementsByTagName("div")项时，它会自动附加到您的集合中。所以，它永远不会结束。

您可以使用div复制收藏集，以便它不会发生变化。

以下是工作演示片段：

＆＃13;

[].slice.call

＆＃13;

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;

＆＃13;

<div id="one"> <div id="two"> </div> </div> <pre id="html"></pre>元素显示HTML结果 - 但是，它看起来很糟糕。您可以使用开发人员工具以熟悉的方式查看实际结构。

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

1 个答案: