javascript - 为什么appendChild会根据元素的顺序而改变？

Question

https://jsfiddle.net/L835jsym/6/

我想使用 JavaScript 将元素从一个 div 移动到另一个 div。当我循环遍历并且它们要移动到的 div 是第一个时，它就起作用了。但是当他们移动的 div 是第一个时，它就不起作用了。为什么？

const newButtonEls = document.getElementsByClassName("new-button");
for (let i = 0; i < newButtonEls.length; i++) {
  const container = document.getElementsByClassName('new-media-btn-container')[0];
  container.appendChild(newButtonEls[i]);
}

<div class = "new-media-btn-container">
  <p>Should be inserted below</p>
</div>
<div class = "two">
  <p>Should not be inserted below here anymore</p>
  <button class = "new-button">New Audio</button>
  <button class = "new-button">New Folder</button>
</div>

const newButtonEls = document.getElementsByClassName("new-button");
for (let i = 0; i < newButtonEls.length; i++) {
  const container = document.getElementsByClassName('new-media-btn-container')[0];
  container.appendChild(newButtonEls[i]);
}

<div class = "two">
  <p>Should not be inserted below here anymore</p>
  <button class = "new-button">New Audio</button>
  <button class = "new-button">New Folder</button>
</div>
<div class = "new-media-btn-container">
  <p>Should be inserted below</p>
</div>

Answer 1

getElementsByClassName 返回一个事件节点列表。

在第一个示例中，当您移动New Audio时，它仍然是集合中的第0项，因为您将其移至较早的位置在文档中。

在第二个示例中，当您将New Audio移至文档中的稍后时，它会成为集合中的第一个元素(您正在更改属于该类成员的元素的顺序)，因此当您将 i 增加到 1 时，您会再次附加 New Audio 并且您从不附加新文件夹(因为当它移动到位置0时您跳过了它)。

您可能想使用 Array.from将事件节点列表转换为静态数组。