將 DOM 元素的第一個子元素移動到最后一個 position 而不創建垃圾節點

Question

我想把第一個跨度元素放在底部，這樣就可以了……

<div id="items">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

...對此：

<div id="items">
<span>2</span>
<span>3</span>
<span>1</span>
</div>

我已經嘗試使用下面的方法來實現這一點，但在 Chrome DevTools 中查看性能監視器時，它似乎在進程中創建了垃圾 DOM 節點。

const itemsEl = document.getElementById('items');
itemsEl.append(itemsEl.children[0]);

是否可以在不創建垃圾 DOM 節點的情況下做到這一點？

Answer 1

嘗試appendChild

您可以嘗試appendChild而不是append ，因為前者的工作范圍較窄（只接受一個孩子，孩子必須是節點），因此 DOM impls 可能會減少內部設置以使其工作。 規范只是一步。

也就是說，我認為您應該考慮這種“垃圾節點”情況是 Chrome 特有的，而不是您可以或應該計划的事情。 今天，WebKit 創建了一個垃圾節點。 明年可能不會。 畢竟， append的規格只有兩個步驟。