使用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))