为什么appendChild会根据元素的顺序进行更改?

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(“新建按钮”);
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>