JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="myList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<button id="myButton">Click me</button>
JavaScript
'use strict';
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
while (s.length) this.push(s.pop());
return this;
}
$(document).ready(function(){
$('#myButton').click(function() {
// Get all children of the <ul>
var lis = $('#myList').children().get();
// Shuffle the DOM elements (children) in the array
lis.shuffle();
// Empty the <ul> list
$('#myList').html('');
// Loop the shuffled array of DOM-elements and put them back in the <ul>
for (var i = 0; i < lis.length; i++) {
$('#myList').append(lis[i]);
}
});
});