JavaScript: ordinare gli elementi del DOM in modo casuale

Ieri ho pubblicato un articolo in cui mostravo come ridisporre gli elementi figli di un dato genitore in modo casuale. Oggi mostrerò come ottenere lo stesso risultato senza utilizzare jQuery.

La funzione principale è la seguente:

function randomize(elems) {
 
    allElems = (function(){
    var ret = [], l = elems.length;
    while (l--) { ret[ret.length] = elems[l]; }
    return ret;
    })();
 
    var shuffled = (function(){
        var l = allElems.length, ret = [];
        while (l--) {
            var random = Math.floor(Math.random() * allElems.length),
                randEl = allElems[random].cloneNode(true);
            allElems.splice(random, 1);
            ret[ret.length] = randEl;
        }
        return ret; 
    })(), l = elems.length;
 
    while (l--) {
        elems[l].parentNode.insertBefore(shuffled[l], elems[l].nextSibling);
        elems[l].parentNode.removeChild(elems[l]);
    }
 
}

Esempio d'uso:

var btn = document.getElementById('shuffle');
var elements = document.getElementById('test').getElementsByTagName('li');
    
btn.onclick = function() {
        
   randomize(elements);
        
};

Potete visionare l'esempio finale in questa pagina.