将div中的所有表附加到正文上

Question

我有一个div，里面有3个表。

var x = tempDiv.getElementsByClassName("hiscore_table");

我确实知道这一点，因为当我控制台登录时，它打印如下：

我创建了一个新的div来附加表格

var newDiv = document.createElement('div');

for (let i = 0; i < x.length; i++) {
    newDiv.appendChild(x[i]);
}

然后我追加到身体，但只有2张表显示。我调试了for循环，它只运行循环2次。如果我打印x.length我得到3.我不太擅长调试，但当我追加孩子它似乎是从旧div中删除它，也许这就是原因。

Answer 1

您正在创建一个新的<div>并在其中附加当前存在于DOM中的元素。这意味着您从DOM中删除这些元素，以便将它们附加到<div>（不在DOM中）。

接下来，您需要了解的关于HTMLCollections（document.getElementsByClassName的返回值）的事情是，它们是 live 列表。这意味着对DOM的任何更改都会立即反映在集合中。

所以，i是0，你追加第一个元素，你的集合现在只包含两个元素。

接下来，i为1，您附加剩余集合的第二个元素 ，这是第三个元素。该集合中只剩下一个元素。

接下来，i为2，超出了现在的单元素集合范围。

这类似于removing items from an HTMLCollection。

有几种方法可以解决这个问题，比如以相反的顺序迭代。但我更喜欢功能性方法：

Array.from(x).forEach((table) => newDiv.appendChild(table));

这会立即将HTMLCollection转换为数组，因此它不再是实时列表。

Answer 2

为了完整起见，如果你想支持旧浏览器而不需要pollyfill或类似的（即编写健壮，易于维护的代码），你可以使用while循环：

＆＃13;

＆＃13;

while (x[0]) {
  newDiv.appendChild(x[0]);
}

＆＃13;

＆＃13;

＆＃13;

哦，另一个简单的解决方法是使用 querySelectorAll ，它返回一个静态NodeList：

var x = tempDiv.querySelectorAll(".hiscore_table").