Question

我正在为＆＃34;循环三角形＆＃34;在Eloquent JavaScript ch2结束时练习。本书要求将输出记录到控制台，但我想将输出打印到网页，而不是在id =＆＃34;三角形＆＃34;的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 car声明放在for循环中，它可以正常工作。我知道JS最佳实践鼓励避免全局范围，我最近做了很多Java编程，在我看来，如果我在全球范围内使用createElement（＆＃34; br＆＃34;）可能会很方便想在页面上的另一个循环中使用它。

即使我已经有了解决该问题的解决方案，我也想知道为什么for循环上的最终表达式会触发删除子节点。基本上，为什么这不起作用？我一直在高低搜索，但没有运气。

Answer 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);
}

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

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

2 个答案: