将 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的规格只有两个步骤。