如何将body元素内的全部内容转移到div元素中？

你原来的代码只是把body的内容复制追加到body里，所以会出现重复内容，而非真正的转移。要实现「把body里的内容彻底移到新div中」，有两种常用方法，可根据场景选择：

方法一：移动真实DOM节点（推荐，保留事件绑定） #

这种方法会直接迁移body内的所有元素（包括它们绑定的事件、状态），不会丢失任何交互逻辑：

// 创建一个新的div容器
const container = document.createElement('div');

// 循环将body的子元素逐个移到div中
while (document.body.firstChild) {
  container.appendChild(document.body.firstChild);
}

// 最后把这个div放回body内
document.body.appendChild(container);

原理：appendChild 方法传入已存在于DOM中的节点时，会自动将其从原位置移除，再添加到新位置。循环处理body的第一个子元素，直到body清空，再把div放回即可完成转移。

方法二：用innerHTML复制内容（适合静态无交互页面） #

如果页面内容都是静态文本/标签，没有绑定点击事件等交互逻辑，也可以用这种方式，但会丢失所有元素的事件绑定：

// 创建新div容器
const container = document.createElement('div');
// 把body的内容赋值给div
container.innerHTML = document.body.innerHTML;
// 清空原body的内容
document.body.innerHTML = '';
// 将div添加到body中
document.body.appendChild(container);

你之前尝试失败的原因是只做了赋值，没清空原body内容，补上清空步骤就能生效。

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