How to randomize the order in which lists are displayed in HTML?

Question

I have an HTML list like this:

<ul>
<li>This is an item.</li>
<li>This is another item.</li>
<li>This is yet another item.</li>
</ul>

How can I have these items displayed in a random order each time the document is loaded?

Answer 1

Add this javascript:

var ul = document.getElementById("list");
for (var i = ul.children.length; i >= 0; i--)
ul.appendChild(ul.children[Math.random() * i | 0]);

DEMO

(This answer was originally provided by Alexey Lebedev for this question: javascript - shuffle HTML list element order)

Answer 2

As it has answer here javascript - shuffle HTML list element order

var ul = document.getElementById("item");

for (var i = ul.children.length; i >= 0; i--) { ul.appendChild(ul.children[Math.random() * i | 0]); }