Сортировка таблиц HTML в Javascript с Array работает, но почему?

Question

В этом коде:

let container = document.getElementById('variables');
Array.from(container.querySelectorAll('tr'))
  .sort((a, b) => a.getAttribute("name").localeCompare(b.getAttribute("name"), ))
  .forEach(tr => container.appendChild(tr));
  

<table id="variables">
  <tr name=B>
    <td>B</td>
  </tr>
  <tr name=A>
    <td>A</td>
  </tr>
  <tr name=C>
    <td>C</td>
  </tr>
</table>

Я создаю несортированную таблицу HTML и сортирую ее с помощью JavaScript.

Я работаю, но я не понимаю, почему я не получаю исходный массив с последующим сортировочным, потому что forEach do appendChild к исходной таблице

В чем заключается магияэтот код?

Answer 1

foo.appendChild(bar) ставит bar в конце foo.

Поскольку элемент не может существовать в двух местах одновременно, если он уже был дочерним элементом другого элемента, он сначала удаляется оттуда.

т.е. это не то же самое, что foo.appendChild(bar.cloneNode(true))