java script html_如何用Java Script将HTML重新排序

可以用类数组方法排序后都进行一次 appendChild 移位。const mylist = document.getElementById('mylist');

[ ...mylist.children ]

.sort((a, b) => Number(a.id) - Number(b.id))

.forEach((ele) => {

mylist.appendChild(ele);

});

其中，[ ...foo ] 是 Array.from(foo) 的简写。forEach 方法是按首项到末项的顺序执行的，这在 ECMAScript 标准中有明确定义，可以放心使用。forEach calls callbackfn once for each element present in the array, in ascending order.

而 appendChild 负责把元素放到被 append 元素的子元素的最后。这样，按顺序依次把每子项放最后，就成按顺序排布的状态了。

但是，不推荐以 id 的方式来设定元素顺序。你可以使用自定义属性 data-* 这一类。

• text 2
• text 3
• text 1

然后使用 dataset 属性在 JavaScript 中访问。参阅 data-* - HTML(超文本标记语言) | MDN。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 属性的特点，改变显示顺序。 参阅 Flex项排序 - CSS(层叠样式表) | MDN。#mylist {

display: flex;

flex-direction: column;

}const mylist = document.getElementById('mylist');

[ ...mylist.children ].forEach((ele) => {

ele.style.setProperty('order', ele.dataset.order);

});