HTML 元素在 Javascript for 循环中添加，然后在计数器增加时删除答案

【问题标题】：HTML Element is added in Javascript for loop then removed when counter incrementsHTML 元素在 Javascript for 循环中添加，然后在计数器增加时删除
【发布时间】：2018-05-07 19:33:38
【问题描述】：

我正在为 Eloquent JavaScript ch2 末尾的“循环三角形”练习制定解决方案。这本书要求将输出记录到控制台，但我想将输出打印到网页，在 id="triangle" 的 div 中。

此代码正在打印正确数量的哈希。问题在于，当循环在最终表达式中递增时，在 for 循环中创建的
标记被神秘地删除了。也就是说：如果我单步执行代码 hashPrint.appendChild(carriage) 在断点处执行得很好，但是一旦调试器进入 i++，
子元素就会从网页中删除。

var hash = "";
var hashPrint = document.getElementById("triangle");
var carriage = document.createElement("br");

for (var i = 0; i < 7; i++) {
    hash += "#";
    var content = document.createTextNode(hash);
    hashPrint.appendChild(content); 
    hashPrint.appendChild(carriage);
}

如果我将 var 回车声明放在 for 循环中，它可以正常工作。我知道 JS 最佳实践鼓励避免全局范围，我最近一直在做很多 Java 编程，在我看来，如果我想在另一个循环中使用它，那么在全局中使用 createElement("br") 可能会很方便在页面上。

尽管我已经有了解决该问题的方法，但我想知道为什么 for 循环中的最终表达式会触发子节点的删除。基本上，为什么这不起作用？我到处寻找解释，但没有运气。

【问题讨论】：

appendChild 在将元素添加到新位置之前将其从 DOM 中移除。

标签： javascript loops increment createelement

【解决方案1】：

因为您要附加相同的元素，所以每次使用它时它都会自行替换。每次使用时都需要创建一个新的。

for (var i = 0; i < 7; i++) {
  hash += "#";
  var content = document.createTextNode(hash);
  hashPrint.appendChild(content);
  var carriage = document.createElement("br");
  hashPrint.appendChild(carriage);
}

【讨论】：

我也不确定是否可以将多个文本节点添加到同一个元素
是的，我有同样的代码在工作，我想知道为什么我的示例中的代码不起作用。我觉得我懂了。通过在循环外声明节点，它只创建一次，然后在循环的每次迭代后通过 appendChild() 在 DOM 中移动。我还是觉得奇怪的是，在增量上删除了节点，然后直到再次调用该方法才被替换。

【解决方案2】：

尝试克隆节点，否则 appendChild() 会吃掉它：

var hash = "";
var hashPrint = document.getElementById("triangle");
var carriage = document.createElement("br");

for (var i = 0; i < 7; i++) {
    hash += "#";
    var content = document.createTextNode(hash);
    hashPrint.appendChild(content); 
    hashPrint.appendChild(carriage.cloneNode(true));
}

见：https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

或者，Why does cloneNode need to be used when appending a documentFragment?

【讨论】：