HTML table sort in Javascript with Array works but why?

Question

In this code:

 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> 

I create an unsorted HTML table and sort it with JavaScript.

I works but I do not understand why I do not get the original array followed by the sort one because the forEach do appendChild to the original table

What is the magic behind this code?

Answer 1

foo.appendChild(bar) puts bar at the end of foo .

Since an element can't exist in two places at the same time, if it was already the child of another element, it is removed from there first.

ie it is not the same as foo.appendChild(bar.cloneNode(true))