如果我有这样的列表：
<ul id="mylist">
<li id="list-item1">text 1</li>
<li id="list-item2">text 2</li>
<li id="list-item3">text 3</li>
<li id="list-item4">text 4</li>
</ul>
根据我的喜好重新排列 DOM 节点的最简单方法是什么？（这需要在页面加载时自动发生，列表顺序首选项是从 cookie 中获得的）
例如
<ul id="mylist">
<li id="list-item3">text 3</li>
<li id="list-item4">text 4</li>
<li id="list-item2">text 2</li>
<li id="list-item1">text 1</li>
</ul>
虽然使用 JS 库可能有更简单的方法来做到这一点，但这里有一个使用 vanilla js 的可行解决方案。
var list = document.getElementById('mylist');
var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
itemsArr.push(items[i]);
}
}
itemsArr.sort(function(a, b) {
return a.innerHTML == b.innerHTML
? 0
: (a.innerHTML > b.innerHTML ? 1 : -1);
});
for (i = 0; i < itemsArr.length; ++i) {
list.appendChild(itemsArr[i]);
}
使用 es6 语法来使用子项：
var list = document.querySelector('#test-list');
[...list.children]
.sort((a,b)=>a.innerText>b.innerText?1:-1)
.forEach(node=>list.appendChild(node));
您可能会发现对 DOM 节点进行排序表现不佳。另一种方法是在您的 javascript 中使用一个数组，该数组表示将进入 DOM 节点的数据，对该数据进行排序，然后重新生成保存 DOM 节点的 div。
也许你没有那么多节点要排序，所以没关系。我的经验是基于尝试通过操作 DOM 对 HTML 表进行排序，包括具有数百行和几十列的表。
看到它在行动：http : //jsfiddle.net/stefek99/y7JyT/
jQuery.fn.sortDomElements = (function() {
return function(comparator) {
return Array.prototype.sort.call(this, comparator).each(function(i) {
this.parentNode.appendChild(this);
});
};
})();
简洁
我的版本，希望对其他人有用：
var p = document.getElementById('mylist');
Array.prototype.slice.call(p.children)
.map(function (x) { return p.removeChild(x); })
.sort(function (x, y) { return /* your sort logic, compare x and y here */; })
.forEach(function (x) { p.appendChild(x); });