Comment trier les éléments par leur valeur dans l'attribut données en utilisant JS

Je dois trier les éléments qui sont déjà affichés dans l'ordre croissant afin qu'ils se réorganisent. Je dois les trier par les valeurs dans leurs attributs data-val.

<div id="a" class="item" data-val="6">Item a</div> <div id="b" class="item" data-val="8">Item b</div> <div id="c" class="item" data-val="2">Item c</div> <div id="d" class="item" data-val="5">Item d</div> <br /> <button onclick="sortOut()">Sort Out</button> 

J'ai fait un exemple ici: http://jsfiddle.net/quatzael/uKnpa/

Je ne sais pas comment faire ça. J'ai commencé, mais c'est probablement mal.

J'ai besoin de la fonction pour savoir d'abord quels éléments ont une classe appelé «élément», puis ceux avec cette classe trient par la valeur de leur attribut data val.

• Comment réparer "Uncaught TypeError: Impossible d'appeler la méthode 'appendChild' of null"
• En utilisant appendChild avec IE en Javascript
• AppendChild ne fonctionne pas correctement dans IE
• Javascript: AppendChild
• Insertion d'une structure div divisée avec createDocumentFragment

Il doit fonctionner dans tous les navigateurs de sorte que la solution devrait probablement impliquer .appendChild ()

Tnx pour toute aide …

• Append v AppendChild JQuery
• AppendChild ne fonctionne pas avec window.open dans IE
• Vitesse / efficacité de multiples DOM appendChild
• Javascript ajoute un enfant APRÈS élément
• Quoi de mieux, en ajoutant de nouveaux éléments via des fonctions DOM, ou en ajoutant des chaînes avec des balises HTML?

 divs.sort(function(a, b) { return a.dataset.val.localeCompare(b.dataset.val); }); var br = document.getElementsByTagName("br")[0]; divs.forEach(function(el) { document.body.insertBefore(el, br); });