如何使用JavaScript将已打乱的DOM元素恢复为原始顺序

你写的代码存在3个核心错误，直接导致元素消失、功能失效：

• restoreArray 函数直接修改了存储DOM元素的数组，将数组内所有DOM节点替换成了随机生成的数字，后续调用appendChild时传入的是数字而非合法DOM节点，自然不会渲染出任何元素
• restoreArray 内部实现的是洗牌打乱逻辑，和「恢复原始顺序」的需求完全相悖，没有任何排序作用
• 你没有存储初始顺序的基准参照，DOM顺序被打乱后，没有规则可以判断原本的先后顺序，自然无法恢复。另外代码中用到的$filter('parent')(array, 'child')无定义，运行会直接抛出异常。

要实现顺序恢复，需要在首次加载页面、还未打乱顺序前，先把每个子元素的原始序号存储到节点属性中，后续恢复时按照该属性排序即可：

1. 初始加载阶段存储原始顺序

// 页面加载完成、未执行打乱操作前执行
document.querySelectorAll('#parent .child').forEach((el, index) => {
  // 把原始序号存在节点的dataset属性里
  el.dataset.originalOrder = index;
});

2. 编写恢复顺序的函数

function restoreOrder() {
  const container = document.getElementById('parent');
  const children = Array.from(container.querySelectorAll('.child'));
  // 按存储的原始序号升序排序
  children.sort((a, b) => Number(a.dataset.originalOrder) - Number(b.dataset.originalOrder));
  // 按排序后的顺序重新插入节点，appendChild会自动移动原有DOM节点，不需要提前删除
  children.forEach(el => container.appendChild(el));
}

内容的提问来源于stack exchange，提问作者miii