Move first child of a DOM element to last position without creating garbage nodes

  dom, html, javascript

I want to put the first span element at the bottom so that is goes from this…

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

…to this:

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

I’ve tried using the method below to achieve this, but it seems like it creates garbage DOM nodes in the process when looking at the performance monitor in Chrome DevTools.

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

Is it possible to do this without creating garbage DOM nodes?

Source: Ask Javascript Questions

LEAVE A COMMENT