JSFiddle - React, Tailwind, and code Playground

by John Brown

HTML

<!DOCTYPE html>
<title>Bugs in the DOM</title>
<body>
    <div>
         <h1>Bugs in the DOM</h1>

        <input type="button" id="test" value="Sort List (click again to reverse)" />
        <ul id="list">
            <li>Horse Flies</li>
            <li>Bed Bugs</li>
            <li>Mosquito</li>
            <li>Ants</li>
            <li>Mites</li>
            <li>Cricket</li>
            <li>Wooly Bear Catepillar</li>
            <li>Fleas</li>
            <li>Worms</li>
            <li>Leeches</li>
        </ul>
    </div>
    <script type="text/javascript">
        (function() {
            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].innerHTML);

                vals.sort();

                if (sortDescending) vals.reverse();

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

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