js中如何实现节点的排序

// 假设我们有一个ul元素，里面有多个li子元素
const ul = document.getElementById('myList');

// 将li元素转换为数组
const liElements = Array.from(ul.children);

// 对li元素进行排序
liElements.sort((a, b) => {
  // 假设我们按照li元素的文本内容进行排序
  return a.textContent.localeCompare(b.textContent);
});

// 清空ul元素，并将排序后的li元素重新添加到ul中
ul.innerHTML = '';
liElements.forEach(li => ul.appendChild(li));

const ul = document.getElementById('myList');
const fragment = document.createDocumentFragment();

// 将li元素转换为数组并排序
const liElements = Array.from(ul.children).sort((a, b) => {
  return a.textContent.localeCompare(b.textContent);
});

// 将排序后的li元素添加到DocumentFragment中
liElements.forEach(li => fragment.appendChild(li));

// 清空ul元素，并将DocumentFragment中的节点一次性添加到ul中
ul.innerHTML = '';
ul.appendChild(fragment);

const ul = document.getElementById('myList');

// 假设我们有一个自定义的排序函数
function customSort(a, b) {
  // 这里可以根据需要编写复杂的排序逻辑
  const aValue = parseInt(a.getAttribute('data-value'), 10);
  const bValue = parseInt(b.getAttribute('data-value'), 10);
  return aValue - bValue;
}

// 将li元素转换为数组并排序
const liElements = Array.from(ul.children).sort(customSort);

// 清空ul元素，并将排序后的li元素重新添加到ul中
ul.innerHTML = '';
liElements.forEach(li => ul.appendChild(li));