本文介绍如何利用 jquery 将指定父容器（如 `.parent`）下的所有直接子元素，动态包裹进一个新创建的嵌套 `div`（如 `.subparent`）中，实现 dom 结构的重构。
在实际前端开发中，有时需要动态调整 HTML 结构，例如为一组已有子元素添加统一的容器以支持样式隔离、动画控制或响应式布局。jQuery 提供了简洁高效的链式操作方法来完成这类 DOM 重构任务。
核心思路是：先提取 .parent 下的所有子元素，再创建一个新的 <div class="subparent">，将这些子元素追加到该新 div 中，最后将新 div 插入回原 .parent 内部（作为其唯一子元素）。
推荐写法如下：
$('<div class="subparent"></div>')
.append($('.parent').children())
.appendTo('.parent');✅ 这段代码执行后，原始结构：
<div class="parent"> <span>1</span> <span>2</span> <span>3</span> </div>
将被重构为：
<div class="parent">
<div class="subparent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>⚠️ 注意事项：
- .children() 只选取直接子元素，不会误包后代节点，安全性高；
- 新建的 <div> 必须包含结束标签（如 </div> 或自闭合写法 />），否则在某些 jQuery 版本中可能解析异常（推荐显式写为 <div class="subparent"></div>）；
- 若 .parent 中存在文本节点（如空格、换行），.children() 默认会忽略它们；如需保留纯文本内容，应额外处理（但本例中无需）；
- 此操作是一次性结构变更，执行后原子元素已脱离文档流并重新挂载，后续操作请基于新结构进行。
? 小技巧：你也可以使用 .wrapInner() 方法一步实现相同效果，代码更简短：
$('.parent').wrapInner('<div class="subparent"></div>');该方法语义更清晰——“将内部所有内容包裹进指定结构”，且兼容性良好（jQuery 1.4+），是更推荐的替代方案。
总结：无论是使用 append().appendTo() 链式构造，还是更语义化的 wrapInner()，都能高效完成 DOM 包裹需求。选择时建议优先考虑可读性与维护性，wrapInner() 在本场景下更为直观可靠。
