JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<div id="test"> <a href="#">Sort List</a>

</div>
<ul id="list">
    <li>Peter</li>
    <li>Mary</li>
    <li>Paul</li>
    <li>Allen</li>
    <li>James</li>
    <li>Vicki</li>
    <li>Brock</li>
    <li>Dana</li>
    <li>Frank</li>
    <li>Gil</li>
    <li>Helen</li>
</ul>

JavaScript

window.onload = function () {
    var desc = false;
    document.getElementById("test").onclick = function () {
        sortUnorderedList("list", desc);
        desc = !desc;
        return false;
    }
}

function compareText(a1, a2) {
    var t1 = a1.innerText,
        t2 = a2.innerText;
    return t1 > t2 ? 1 : (t1 < t2 ? -1 : 0);
}

function sortUnorderedList(ul, sortDescending) {
    if (typeof ul == "string") {
        ul = document.getElementById(ul);
    }

    var lis = ul.getElementsByTagName("LI");
    var vals = [];

    for (var i = 0, l = lis.length; i < l; i++) {
        vals.push(lis[i]);
    }

    vals.sort(compareText);

    if (sortDescending) {
        vals.reverse();
    }

    ul.innerHTML = '';
    for (var i = 0, l = vals.length; i < l; i++) {
        ul.appendChild(vals[i]);
    }
}