本文介绍如何利用 jquery 将父容器内的所有直接子元素（如 span）整体包裹进一个新创建的、带有指定类名的 inner div 中，实现 dom 结构的动态重构。
在实际前端开发中，有时需要动态调整 DOM 结构，例如将一组平级子元素统一包裹进一个新的语义化容器中，以增强可维护性或适配 CSS 布局需求。jQuery 提供了简洁高效的链式方法来完成此类操作。
核心思路是：提取 .parent 下的所有子元素 → 创建新 推荐写法如下（兼容性强、语义清晰）： ✅ 这是最简洁、最符合语义的方案：wrapInner() 会自动将匹配元素的所有子内容（包括文本节点和元素节点）包裹进指定的 HTML 字符串中，生成目标结构： ⚠️ 注意：原答案中 append().appendTo() 的写法虽能运行，但存在潜在风险——它会先从 DOM 中移除子元素再重新插入，若子元素绑定了事件或存在数据关联（如通过 .data() 存储的状态），可能造成事件丢失或状态断裂。而 wrapInner() 是原子性操作，更安全可靠。 其他等效写法（供理解原理）： ? 总结： $('.parent').wrapInner('<div class="subparent"></div>');<div class="parent">
<div class="subparent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>// 方式二：先清空再重填（需注意事件丢失）
const $children = $('.parent').children().detach();
$('<div class="subparent"></div>')
.append($children)
.appendTo('.parent');
// 方式三：使用 wrapAll（适用于已选中子元素）
$('.parent > *').wrapAll('<div class="subparent"></div>');
