javascript - 关于使用 jQuery 对 HTML DOM 进行排序的问题

Question

我有下面的代码可以完美地对 DOM 进行排序。

HTML：

<ul id="list">
     <li data-order="7"></li>
     <li data-order="6"></li>
     <li data-order="5"></li>
     <li data-order="3"></li>
     <li data-order="4"></li>
     <li data-order="1"></li>
     <li data-order="2"></li>
</ul>
<button>Sort</button>

CSS

li::before {
    content: attr(data-order);
    display: block;
}

带有 jQ​​uery 的 Javascript：

const sortList = function(a, b) {
    return (+a.dataset.order) - (+b.dataset.order) > 0 ? 1: - 1;
};

$('button').click(() => {
    $('#list li').sort(sortList).appendTo('#list');
});

或者您可以在 codepen 上查看： https ://codepen.io/EdmondWang/pen/pozeyXb

我有 2 个问题。

1. 为什么调用排序函数后浏览器不重新布局DOM？

2. 为什么appendTo()需要进行排序工作？（即使没有分离）

提前感谢您的帮助！

标签： javascriptjqueryhtmldom