使用Array的Javascript中的HTML表排序有效，但是为什么呢？

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做appendChild到原始表

该代码背后的魔力是什么？

Answer 1

foo.appendChild(bar)将bar放在foo的末尾。

由于一个元素不能同时存在于两个位置，因此，如果它已经是另一个元素的子元素，则首先将其从那里删除。

即它与foo.appendChild(bar.cloneNode(true))