jQeryでランダムに要素を差し込むには？

よろしくお願い致します。
jQeryを使い、ランダムに要素を差し込む方法を探しております。

$('#wrapper').append('<div id="hogeA"></div>');
$('#wrapper').append('<div id="hogeB"></div>');
$('#wrapper').append('<div id="hogeC"></div>');

というjQeryで生成した３つの要素を以下のように、
リロードするごとにランダムな箇所へ差し込んで表示させるにはどうしたらよいのでしょうか？

以下のようなHTMLへ
<div id="warpper">
　<div class="box"></box>
　<div class="box"></box>
　<div class="box"></box>
　<div class="box"></box>
　<div class="box"></box>
　<div class="box"></box>
　<div class="box"></box>
</div>

読み込むと
<div id="warpper">
　<div class="box"></box>
　　　　　　<div id="hogeA"></div>
　<div class="box"></box>
　<div class="box"></box>
　　　　　　<div id="hogeC"></div>
　<div class="box"></box>
　<div class="box"></box>
　　　　　　<div id="hogeB"></div>
　<div class="box"></box>
　<div class="box"></box>
</div>

リロードすると
<div id="warpper">
　　　　　<div id="hogeC"></div>
　<div class="box"></box>
　　　　　　<div id="hogeA"></div>
　<div class="box"></box>
　<div class="box"></box>
　<div class="box"></box>
　<div class="box"></box>
　<div class="box"></box>
　　　　　　<div id="hogeB"></div>
　<div class="box"></box>
</div>


説明が至らない点は補足させて頂きますので、どうぞよろしくお願い致します。

No.1 回答者： Ogre7077 回答日時： 2014/05/24 16:24

function insert(html) {

_ var target = $('#warpper');
_ var items = target.children('div.box');
_ var n = items.length;
_ var i = Math.random() * (n+1) | 0; // 0以上n以下の数
_ if (i < n)
_ _ items.eq(i).before(html); // i番目の子要素の前に追加
_ else
_ _ target.append(html); // 末尾に追加
}

insert('<div id=hogeA></div>');
insert('<div id=hogeB></div>');
insert('<div id=hogeC></div>');