javascript - 将 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 循环，它只运行了两次循环。如果我打印 x.length 我得到 3。我不太擅长调试，但是当我追加子项时，它似乎从旧的 div 中删除它，也许这就是原因。

Answer 1

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

接下来，关于 HTMLCollection s 你需要了解的事情( document.getElementsByClassName 的返回值)是它们是一个实时列表。这意味着对 DOM 的任何更改都会立即反射(reflect)在集合中。

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

下一步，i是 1 ，您附加剩余集合的第二个元素，这是整体的第三个元素。集合中仅保留一个元素。

下一步，i是 2 ，这超出了您现在的单元素集合的范围。

这类似于 removing items from an HTMLCollection .

有几种方法可以解决这个问题，例如按相反顺序迭代。但我更喜欢函数式方法:

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

这将转换 HTMLCollection立即到一个数组，所以它不再是一个实时列表。