JSFiddle - React, Tailwind, and code Playground

by swesh

HTML

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<ul id="myList"></ul>

JavaScript

function sortList(listId) {
    var list = document.getElementById(listId);
    var frag = document.createDocumentFragment();
    [].map.call(list.getElementsByTagName("li"), function(item) {
        return { text: text(item), element: item };
    }).sort(function(a, b) {
        return a.text < b.text ? -1 : b.text < a.text ? 1 : 0;
    }).forEach(function (item) {
        frag.appendChild(item.element);
    });
    list.appendChild(frag);
}
function text(el) {
    var s = el.innerText;
    if (!s && s != "") {
        s = el.textContent || "";
    }
    return s.toLowerCase();
}

// set up list
$(function() {
    var status = $("<div>").prependTo("body").text("building 10,000 list items ...");
    setTimeout(function() {
        var frag = document.createDocumentFragment();
        for (var i = 0; i < words.length; i++) {
            var item = document.createElement("li");
            item.innerHTML = words[i];
            frag.appendChild(item);
        }
        var list = document.getElementById("myList");
        if (list.childNodes.length) { list.innerHTML = ""; }
        list.appendChild(frag);
        status.text("sorted by frequency of use ");
        $("<button>").text("sort alphabetically").appendTo(status).click(function() {
            status.text("sorting alphabetically ...");
            setTimeout(function() {
                sortList("myList");
                status.text("sorted alphabetically");
            }, 0);
        });
    }, 50);
});

var words = "the of and to in I that was his he it with is for as had you not be her on at by which have or from this him but all she they were my are me one their so an said them we who would been will no when there if more out up into do any your what has man could other than our some very time upon about may its only now like little then can should made did us such a great before must two these see know over much down after first mr good men own never most old shall day where those came come himself...