如何用js将HTML重新排序

问题

下面代码中，使用js将li按照data-id来重新排序。

<ul id="mylist">
  <li data-order="2">item2</li>
  <li data-order="3">item3</li>
  <li data-order="1">item1</li>
</ul>

方法一

const mylist = document.getElementById('mylist');
[ ...mylist.children ]
  .sort((a, b) => Number(a.dataset.order) - Number(b.dataset.order))
  .forEach((ele) => {
    mylist.appendChild(ele);
  });

方法二

直接操作 DOM 的性能花销比较大，更为建议使用 CSS 中 flex 元素 order 属性的特点，改变显示顺序。
css:

#mylist {
  display: flex;
  flex-direction: column;
}

js:

const mylist = document.getElementById('mylist');
[ ...mylist.children ].forEach((ele) => {
  ele.style.setProperty('order', ele.dataset.order);
});

附：
appendChild补充
sort按对象属性排序