Почему appendChild изменяется в зависимости от порядка элементов?

Question

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

Я хочу перейти к элементам из одного элемента div в другой, используя JavaScript. Когда я прохожу через 1020 и дивы, в которые они движутся, сначала это работает. Но когда 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 на позже в документе, он становится 1 st-элементом в коллекции (вы меняете порядок элементов, которые являются членами этого класса), поэтому при увеличении i до 1 вы добавляете New Audio снова и никогда не добавляете New Folder (потому что вы пропустили его, когда он был перемещен в позицию 0).

Возможно, вы захотите использовать Array.from для преобразования списка активных узлов в массив stati c.