如何用原生JavaScript动态创建div并包裹body内全部DOM元素？

嘿，我完全懂你现在的困惑——想给<body>里的所有元素套一个带ID的新容器div，但写的代码却把新div加到了DOM末尾，还拿不准要不要手动删除旧元素对吧？别慌，这其实是DOM操作里很典型的场景，咱们用原生JS就能轻松搞定，而且根本不需要手动删除旧元素，原因我慢慢给你说：

核心原理 #

当你把一个DOM元素从它当前的父节点移动到另一个父节点时，它会自动从原位置移除，不需要额外调用remove()之类的方法。所以我们的思路就是：先建好容器，把body的所有子元素“搬”进去，最后再把容器放到body里。

完整实现代码 #

// 1. 创建目标容器div并设置ID
const wrapperDiv = document.createElement('div');
wrapperDiv.id = 'custom-body-wrapper'; // 替换成你需要的ID

// 2. 把body的子元素转成数组（关键！避免动态集合遍历出问题）
const bodyElements = Array.from(document.body.children);

// 3. 遍历所有子元素，将它们移入新容器
bodyElements.forEach(element => {
  wrapperDiv.appendChild(element);
});

// 4. 把容器添加回body中
document.body.appendChild(wrapperDiv);

为什么之前的代码没生效？ #

你之前的代码应该是先把新div直接append到body末尾，再尝试往里面加元素，但这样原body的子元素还留在原地，新容器自然就跑到最后了。而上面的代码是先把所有body子元素“搬”进容器，再把容器放回去，这样就完美实现了包裹效果。

额外注意点 #

• 为什么要转成数组？：document.body.children是一个动态NodeList，如果直接遍历它，当你移动第一个元素后，这个集合的长度会实时变化，导致后面的元素遍历不全。转成数组后就变成了静态集合，遍历更稳妥。
• 如果要过滤文本节点：如果body里有空格、换行这类文本节点，不想把它们也包裹进去，可以改成过滤元素节点：

  const bodyElements = Array.from(document.body.childNodes).filter(node => {
    return node.nodeType === Node.ELEMENT_NODE;
  });
  

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