Open for discussion [NO flaming allowed]
jsfiddle: [url]http://jsfiddle.net/sxxzhLxd/
[code=html]<!DOCTYPE html>
<html>
<head>
<style>
div div { padding: 1px 1em };
</style>
</head>
<body>
<div id=test>
<div style=”background-color:yellow”>B</div>
<div style=”background-color:yellow”>D</div>
<div style=”background-color:yellow”>A</div>
<div style=”background-color:yellow”>C</div>
<div style=”background-color:yellow”>E</div>
<div style=”background-color:orange”>B</div>
<div style=”background-color:orange”>D</div>
<div style=”background-color:orange”>A</div>
<div style=”background-color:orange”>C</div>
<div style=”background-color:orange”>E</div>
<div style=”background-color:red”>B</div>
<div style=”background-color:red”>D</div>
<div style=”background-color:red”>A</div>
<div style=”background-color:red”>C</div>
<div style=”background-color:red”>E</div>
</div>
<input type=button value=”Sort” onclick=”dosort()”>
<script>
function dosort() {
var i = 0,
elements = [].slice.call(test.children).
sort(function (a, b) {
if (a.innerText < b.innerText) return -1;
});
while (elements[i])
test.appendChild(elements[i++]);
}
</script>
</body>
</html>