本文介绍如何利用 jquery 将指定父容器（如 `.parent`）下的所有直接子元素，动态包裹进一个新创建的嵌套 `div`（如 `.subparent`）中，实现 dom 结构的重构。
在实际前端开发中，有时需要动态调整 HTML 结构，例如为一组已有子元素添加统一的容器以支持样式隔离、动画控制或响应式布局。jQuery 提供了简洁高效的链式操作方法来完成这类 DOM 重构任务。
核心思路是：先提取 .parent 下的所有子元素，再创建一个新的 推荐写法如下： ✅ 这段代码执行后，原始结构： 将被重构为： ⚠️ 注意事项： ? 小技巧：你也可以使用 .wrapInner() 方法一步实现相同效果，代码更简短： 该方法语义更清晰——“将内部所有内容包裹进指定结构”，且兼容性良好（jQuery 1.4+），是更推荐的替代方案。 总结：无论是使用 append().appendTo() 链式构造，还是更语义化的 wrapInner()，都能高效完成 DOM 包裹需求。选择时建议优先考虑可读性与维护性，wrapInner() 在本场景下更为直观可靠。$('<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>
$('.parent').wrapInner('<div class="subparent"></div>');
