JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<script src="http://files.the-friend-family.com/log.js"></script>
<button onclick='doSwap("A", "B")'>Swap A B</button><br>
<button onclick='doSwap("B", "C")'>Swap B C</button><br>
<button onclick='doSwap("A", "C")'>Swap A C</button><br>
<button onclick='doSwap("C", "A")'>Swap C A</button><br>
<br>
<ul><li id="A">Item A</li><li id="B">Item B</li><li id="C">Item C</li></ul>

CSS

button {
    margin-bottom: 5px;
}

JavaScript

function doSwap(a, b) {
    swapElements(document.getElementById(a), document.getElementById(b));
}

function swapElements(obj1, obj2) {
    // save the location of obj2
    var parent2 = obj2.parentNode;
    var next2 = obj2.nextSibling;
    // special case for obj1 is the next sibling of obj2
    if (next2 === obj1) {
        // just put obj1 before obj2
        parent2.insertBefore(obj1, obj2);
    } else {
        // insert obj2 right before obj1
        obj1.parentNode.insertBefore(obj2, obj1);

        // now insert obj1 where obj2 was
        if (next2) {
            // if there was an element after obj2, then insert obj1 right before that
            parent2.insertBefore(obj1, next2);
        } else {
            // otherwise, just append as last child
            parent2.appendChild(obj1);
        }
    }
}