本文介绍如何利用 jquery 将父容器内的所有直接子元素（如 span）整体包裹进一个新创建的、带有指定类名的 inner div 中，实现 dom 结构的动态重构。
在实际前端开发中，有时需要动态调整 DOM 结构，例如将一组平级子元素统一包裹进一个新的语义化容器中，以增强可维护性或适配 CSS 布局需求。jQuery 提供了简洁高效的链式方法来完成此类操作。
核心思路是：提取 .parent 下的所有子元素 → 创建新 <div class="subparent"> → 将子元素追加到新 div 中 → 再将该新 div 替换/插入为 .parent 的唯一子元素。
推荐写法如下（兼容性强、语义清晰）：
$('.parent').wrapInner('<div class="subparent"></div>');✅ 这是最简洁、最符合语义的方案：wrapInner() 会自动将匹配元素的所有子内容（包括文本节点和元素节点）包裹进指定的 HTML 字符串中，生成目标结构：
<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。
