jQueryでdivを属性'data-sort'に基づいてソートする？

質問

複数のdivがある場合。

<div data-sort='1'>div1</div>
<div data-sort='4'>div4</div>
<div data-sort='8'>div8</div>
<div data-sort='12'>div12</div>
<div data-sort='19'>div19</div>

そして、divを動的に作成しています。

<div data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>

全てのdivを再読み込みしなくても、既に読み込まれているdivに順番に振り分けられるようにするにはどうしたらいいでしょうか？

画面上のすべてのdivのデータソート値の配列を構築し、新しいdivがどこに収まるかを見る必要があると思うのですが、これが最善の方法かどうかはわかりません。

どのように解決するのですか？

この関数を使用する

   var result = $('div').sort(function (a, b) {

      var contentA =parseInt( $(a).data('sort'));
      var contentB =parseInt( $(b).data('sort'));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
   });

   $('#mylist').html(result);

新しいdivを追加した直後にこの関数を呼び出すことができます。

divの中でjavascriptのイベントを保持したい場合は、上記の例のようにhtml replaceを使用しないでください。 代わりに

$(targetSelector).sort(function (a, b) {
    // ...
}).appendTo($container);