我有一个 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 中删除它,也许这就是原因。
最佳答案
您正在创建一个新的 <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
立即到一个数组,所以它不再是一个实时列表。
关于javascript - 将 div 中的所有表格附加到主体上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50205114/