按字符串顺序重新排序DOM节点

题目

<!--练习 对于一个已有的HTML结构：
1、Haskell
2、JavaScript
3、Python
4、Ruby
5、Scheme
-->
<!-- HTML结构 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

答案

// sort list:
var root = document.getElementById('test-list');
var list = document.getElementsByClassName('lang');
console.log(list);
for(var i=0;i<list.length;i++){
for(var j=0;j<list.length-1;j++){
if(list[j].innerText>list[j+1].innerText){
root.insertBefore(list[j+1], list[j]);
}
}
}
console.log(list[0].innerText);
// 测试:
;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t && t.children && t.children.length === 5) {
        arr = [];
        for (i=0; i<t.children.length; i++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
            console.log('测试通过!');
        }
        else {
            console.log('测试失败: ' + arr.toString());
        }
    }
    else {
        console.log('测试失败!');
    }
})();

分析

思路一

通过Class的名字获取列表后进行排序，然后使用appendChild设置回去
但是行不通

思路二

通过冒泡算法，每次比较出最小，然后使用appendChild设置到最后，还是不通

思路三

通过两两比较，再通过一个insertBefore，交换在Dom树中的位置