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

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

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

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

$('.parent').wrapInner('<div class="subparent"></div>');

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

<div class="parent">
  <div class="subparent">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</div>

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

其他等效写法（供理解原理）：

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

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

? 总结：

• 优先使用 wrapInner() —— 简洁、安全、一行解决；
• 避免手动 detach/append，除非需精细控制中间状态；
• 确保 jQuery 已正确引入（如 CDN：https://code.jquery.com/jquery-3.6.0.min.js）；
• 若项目已迁移到现代前端框架（如 Vue/React），建议通过响应式数据驱动结构变更，而非直接操作 DOM。