Sort (5以降の数字がソートされない

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
</head>
<body>
	<ol id="test1">
<!-- 	<li id="9">id:9 iiiiii</li> -->
	<li id="3">id:3 cccccc</li>
<!-- 	<li id="6">id:6 ffffff</li> -->
	<li id="4">id:4 dddddd</li>
	<li id="1">id:1 aaaaaa</li>
<!-- 	<li id="7">id:7 gggggg</li> -->
	<li id="2">id:2 bbbbbb</li>
	<li id="5">id:5 eeeeee</li>
<!-- 	<li id="10">id:10 jjjjjj</li> -->
<!-- 	<li id="8">id:8 hhhhhh</li> -->


</ol>

<script>

var parent = document.getElementById('test1');
var childs = parent.getElementsByTagName('li');

//直接 childs.sort() と記述することはできない。
//よって、比較用にオブジェクト配列を作成する。
var arr = [];
for (i=0; i<childs.length; i++) {
	arr[i] = {
		index : i,
		id : parseInt(childs[i].getAttribute('id'), 12)
	};
}
//JavaScriptには"insertAfter"が存在しないため、大きい順に並べ替える。
arr.sort(function(a, b) { return b.id - a.id });
//実際に要素を並べ替える。
for (i=0; i<arr.length; i++) {
	parent.insertBefore(childs[arr[i].index]);
}
	
</script>
</body>
</html>

謎である。