Javascript DOM How to - Sort DOM elements with sort()

Question

We would like to know how to sort DOM elements with sort().

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.onload=function(){<!-- ww  w  .  j ava  2 s.c  om-->
    var div = document.querySelector('#wrap'),
        para = document.querySelectorAll('#wrap p');
    var paraArr = [].slice.call(para).sort(function (a, b) {
        return a.textContent > b.textContent ? 1 : -1;
    });
    paraArr.forEach(function (p) {
        div.appendChild(p);
    });
}
</script>
</head>
<body>
  <div id="wrap">
    <p>C</p>
    <p>B</p>
    <p>A</p>
  </div>
</body>
</html>

The code above is rendered as follows: