Javascript 将div中的所有表追加到主体上

我有一个沙发，里面有三张桌子

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

我肯定知道这一点，因为当我记录它时，它打印如下：

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

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

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

然后我将其附加到主体中，但只显示了两个表。我调试了for循环，它只运行了2次循环。如果我打印x.length，我得到3。我不太擅长调试，但当我附加child时，它似乎是在从旧div中删除它，也许这就是原因。

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

接下来，关于document.getElementsByClassName的返回值，您需要知道的是它们是一个活动列表。这意味着对DOM的任何更改都会立即反映在集合中

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

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

接下来，i是2，对于现在的单元素集合来说，这超出了范围

这类似于

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

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

---

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

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

而x[0]{ newDiv.appendChildx[0]；

---

}那太好了。我需要调查一下实时列表的区别。谢谢：在较新的实现中，NodeList也有很多，支持Array.from的所有或多个主机可能都支持它。