javascript - 通过javascript在有序列表中附加子列表项

Question

有没有办法在javascript中按顺序追加子节点？我这里有这段代码来创建和排序列表并在其中添加列表项，但它没有将它们放入排序形式。

var listContainer = document.getElementById("content1");
var listElement = document.createElement("ol");
listContainer.appendChild(listElement);

for(i = 0; i < arr.length; i++) {

    var listItem = document.createElement("li");
    listItem.innerHTML = arr[i].color + " " + arr[i].value +"</br>";
    listElement.appendChild(listItem);

}

Answer 1

我假设您希望按照数组中“value”属性的顺序列出项目(正如您提到的“蓝色”应该在“绿色”之前。

如果是这样，您需要在迭代输出之前根据适当的属性对数组进行排序。

使用此方法，您可以根据需要向数组添加更多项目 - 只需在更新输出之前调用排序例程...

我已经更新了您的代码(以及 @mcon 的 fiddle 中提供的代码)，并添加了排序比较器。

感谢 @Wogan，这里提供了排序函数的简单示例:https://stackoverflow.com/a/1129270/4619012

<div id="content1"></div>

    <script type="text/javascript">
        var listContainer = document.getElementById("content1");
        var listElement = document.createElement("ol");
        listContainer.appendChild(listElement);

        var arr = [
            { color: 'red', value: '#f00' },
            { color: 'green', value: '#0f0' },
            { color: 'blue', value: '#00f' },
            { color: 'cyan', value: '#0ff' },
            { color: 'magenta', value: '#f0f' }
        ]

        function compareValue(a, b) {
            if (a.value < b.value)
                return -1;
            if (a.value > b.value)
                return 1;
            return 0;
        }

        arr.sort(compareValue);

        for (i = 0; i < arr.length; i++) {
            var listItem = document.createElement("li");
            listItem.innerHTML = arr[i].color + " " + arr[i].value + "</br>";
            listElement.appendChild(listItem);
        }
    </script>