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?

Need some more information. You can always use `ul.magic(random)`, that should do the trick too. Order them can be done in javascript or at serverside though. — bobthedeveloper, May 23 '14 at 06:05

score 1 · Answer 1 · edited May 23 '17 at 12:03

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]);

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

edited May 23 '17 at 12:03

Community

answered May 23 '14 at 06:06

Tarun

1

Atlest give proper attribution – Satpal May 23 '14 at 06:07
Yes, i know it's duplicate; I found the answer [here](http://stackoverflow.com/questions/7070054/javascript-shuffle-html-list-element-order) – Tarun May 23 '14 at 06:11

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

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

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

edited May 23 '17 at 11:51

Community

answered May 23 '14 at 06:07

Neel

2 Answers2