We can finally move elements in the browser with the moveBefore() API - LogRocket Blog
Briefly

The newly released moveBefore() API from Chrome revolutionizes how developers manage DOM elements. Traditionally, moving an element required removal and reinsertion, resulting in a loss of state. The moveBefore() API simplifies this process by allowing developers to relocate elements without losing their state. This is especially beneficial for applications with complex animations that require nuanced state management. The API's user-friendly syntax allows for easy integration, providing a more efficient solution compared to methods like appendChild() or insertBefore().
The newly announced moveBefore() API helps developers easily reposition DOM elements while preserving their state. This new API is particularly valuable for web applications with complex animations and more nuanced state management.
For the past twenty years, whenever we as developers 'move' elements within a webpage, what really happens behind the scenes is that we remove and then insert that element elsewhere. The element also tends to lose its initial state.
This is exactly why we have the moveBefore() API. It is available on any DOM node, allowing developers to move elements while preserving their state, a feature previously unavailable.
In terms of usage, the syntax for the moveBefore() API is parentNode.moveBefore(nodeToMove, referenceNode), simplifying the moving of elements in the DOM without compromising their properties.
Read at LogRocket Blog
[
|
]