如何创建并添加div以包裹父元素下的子div内容？

现有HTML结构：

<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>

需要修改为：

<div class="main">
  <div class="wrapper">
    <div class="sub">1</div>
    <div class="sub">2</div>
    <div class="sub">3</div>
  </div>
</div>

已编写部分JavaScript代码，但不想使用innerHTML方式，寻求其他实现方法：

let main = document.querySelector(".main");
let div = document.createElement("div");
div.className = "wrapper";
// main.appendChild(div);
// main.insertBefore(div, main.children[0]);
// main.insertBefore(div, main.nextElementSibling); 
// main.insertBefore(div, main.firstChild);
// 我不想用这种方式：
// main.innerHTML = '<div class="wrapper">'+main.innerHTML+'</div>';

不用innerHTML也能轻松搞定，核心思路就是把原有的子节点直接移到新容器里——DOM节点在页面中是唯一的，移到新容器后会自动从原位置消失，不需要额外删除操作。给你两种实用写法：

写法一：循环移动子节点 #

let main = document.querySelector(".main");
let wrapper = document.createElement("div");
wrapper.className = "wrapper";

// 循环将.main的第一个子节点移到wrapper中，直到.main的直接子节点为空
while (main.firstChild) {
  wrapper.appendChild(main.firstChild);
}

// 最后将wrapper插入到.main中
main.appendChild(wrapper);

写法二：批量移动子节点 #

let main = document.querySelector(".main");
let wrapper = document.createElement("div");
wrapper.className = "wrapper";

// 将.main的所有直接子元素转为数组
const subNodes = Array.from(main.children);
// 先把wrapper加入.main，再批量转移子节点
main.appendChild(wrapper);
wrapper.append(...subNodes);

这两种方法都是直接操作真实DOM节点，避免了innerHTML可能带来的XSS风险，也不会触发不必要的页面重绘，比字符串拼接的方式更安全高效。

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