Почему append в Js меняет местами элементы?

Question

[Alex Clean]

Я знаю, что append, prepend, before and after меняют положение элемента в DOM Дереве. Но не до конца понимаю следующий код:

<table id="table">
    <tr>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Возраст</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Pete</td>
      <td>Brown</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Ann</td>
      <td>Lee</td>
      <td>5</td>
    </tr>
  </table>

И js

'use strict';

const sortTable = () => {
  let ar = document.querySelectorAll('tr');
  let table = document.getElementById('table');
  ar = Array.from(ar);

  ar = ar.slice(1).sort((a,b) => {
      return a.firstChild.data > b.firstChild.data ? 1 : -1;
    });

  table.firstElementChild.append(...ar);
};

sortTable();

Как я это понимаю. Когда я создал переменную ar с помощью Array.from из tr, то все tr клонировались в массив?.? Я сам не знаю. После чего, когда я отсортировал все элементы\ с помощью .sort(), я разворачиваю массив с tr в таблицу и по сути, т.к они не оригинальные узлы, то должны просто добавляться в конец. Так почему же они заменяют изначальные?