如何使用 jQuery 将子元素包裹进新创建的内层 div 中

本文介绍如何利用 jquery 将父容器内的所有直接子元素（如 span）整体包裹进一个新创建的、带有指定类名的 inner div 中，实现 dom 结构的动态重构。

在实际前端开发中，有时需要动态调整 DOM 结构，例如将一组平级子元素统一包裹进一个新的语义化容器中，以增强可维护性或适配 CSS 布局需求。jQuery 提供了简洁高效的链式方法来完成此类操作。

核心思路是：提取 .parent 下的所有子元素 → 创建新 → 将子元素追加到新 div 中 → 再将该新 div 替换/插入为 .parent 的唯一子元素。

推荐写法如下（兼容性强、语义清晰）：

$('.parent').wrapInner('');

✅ 这是最简洁、最符合语义的方案：wrapInner() 会自动将匹配元素的所有子内容（包括文本节点和元素节点）包裹进指定的 HTML 字符串中，生成目标结构：

  
    1
    2
    3
  

⚠️ 注意：原答案中 append().appendTo() 的写法虽能运行，但存在潜在风险——它会先从 DOM 中移除子元素再重新插入，若子元素绑定了事件或存在数据关联（如通过 .data() 存储的状态），可能造成事件丢失或状态断裂。而 wrapInner() 是原子性操作，更安全可靠。

// 方式二：先清空再重填（需注意事件丢失）
const $children = $('.parent').children().detach();
$('')
  .append($children)
  .appendTo('.parent');

// 方式三：使用 wrapAll（适用于已选中子元素）
$('.parent > *').wrapAll('');