JAVASCRIPT

Efficiently Swap the Positions of Two DOM Elements

Learn how to programmatically swap the visual positions of two existing DOM elements on a webpage using native JavaScript, ensuring efficient DOM manipulation without full re-renders.

function swapElements(elem1, elem2) {
    if (!elem1 || !elem2 || elem1 === elem2) {
        console.error("Invalid elements provided for swapping.");
        return;
    }

    const parent1 = elem1.parentNode;
    const parent2 = elem2.parentNode;

    if (!parent1 || !parent2) {
        console.error("One or both elements do not have a parent node.");
        return;
    }

    // Create a temporary placeholder for elem1
    const tempPlaceholder = document.createElement('span'); // Use span for minimal impact
    parent1.insertBefore(tempPlaceholder, elem1);

    // Now insert elem2 where elem1 was
    parent2.insertBefore(elem1, elem2);

    // Finally, insert elem1 where elem2 was (or where tempPlaceholder is)
    tempPlaceholder.parentNode.replaceChild(elem2, tempPlaceholder);
}

// Example:
// <div id="container">
//   <p id="first">First Element</p>
//   <p id="second">Second Element</p>
// </div>
// const elemA = document.getElementById('first');
// const elemB = document.getElementById('second');
// if (elemA && elemB) {
//   swapElements(elemA, elemB);
// }

How it works: This function efficiently swaps the positions of two given DOM elements, regardless of whether they share the same parent. It works by using a temporary placeholder to hold the first element's position, then moving the second element into the first's original spot, and finally moving the first element into the second's original spot (where the placeholder was). This method minimizes DOM manipulations and ensures correct placement.

Efficiently Swap the Positions of Two DOM Elements

Need help integrating this into your project?