移除<body>元素后按间隔逐个添加回页面的JS代码异常排查

你的代码只添加前两个元素，主要有两个问题：

1. var的作用域坑：用var声明的element是函数级作用域，所有setTimeout的回调共用同一个element变量。等定时器触发时，循环早就跑完了，element指向的是最后一次循环的元素，所以多数回调只会重复加同一个元素，甚至没效果。
2. 动态集合的遍历问题：body.children是动态集合，每次删完元素，这个集合的长度和元素都会实时变化，导致循环里的i取值和你预期的不一样，漏处理了部分元素。

建议先把body里的所有子元素存到普通数组（静态集合）里，统一删掉后，再通过定时器逐个加回去。同时用let或者闭包保证每个定时器能拿到正确的元素。

方案1：用let声明变量（ES6及以上可用） #

利用let的块级作用域，每个循环迭代都会有独立的element变量：

window.onload = function() {
  const body = document.body;
  // 把所有子元素转成数组，避免动态集合的问题
  const elements = Array.from(body.children);
  // 先统一移除所有元素
  elements.forEach(el => body.removeChild(el));
  
  let delay = 0;
  // 遍历数组逐个添加
  elements.forEach(el => {
    setTimeout(() => {
      body.appendChild(el);
    }, delay);
    delay += 5000;
  });
}

方案2：用立即执行函数（兼容旧浏览器） #

如果要兼容ES5环境，用立即执行函数给每个定时器创建独立作用域：

window.onload = function() {
  var body = document.body;
  var elements = [];
  // 先把所有元素存到数组里
  for (var i = 0; i < body.children.length; i++) {
    elements.push(body.children[i]);
  }
  // 统一移除所有元素
  for (var j = 0; j < elements.length; j++) {
    body.removeChild(elements[j]);
  }
  
  var time = 0;
  for (var k = 0; k < elements.length; k++) {
    // 用立即执行函数捕获当前元素
    (function(element) {
      setTimeout(function() {
        body.appendChild(element);
      }, time);
    })(elements[k]);
    time += 5000;
  }
}

方案3：用setInterval控制节奏（更简洁） #

也可以用setInterval来控制添加的间隔，不用手动累加延迟：

window.onload = function() {
  const body = document.body;
  const elements = Array.from(body.children);
  elements.forEach(el => body.removeChild(el));
  
  let index = 0;
  const addInterval = setInterval(() => {
    if (index >= elements.length) {
      clearInterval(addInterval);
      return;
    }
    body.appendChild(elements[index]);
    index++;
  }, 5000);
}

• 先把body.children转成普通数组，避免操作DOM时集合动态变化导致的遍历错误。
• 用块级作用域或闭包，确保每个定时器回调能拿到对应的元素，不会串变量。
• 统一删除再逐个添加，逻辑更清晰，避免循环中操作DOM带来的意外问题。

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