如何使用 jQuery 将子元素包裹进新创建的内部 div 中

花韻仙語 2026-01-15 00:00:00 次阅读

本文介绍如何利用 jquery 将指定父容器（如 `.parent`）下的所有直接子元素，动态包裹进一个新创建的嵌套 `div`（如 `.subparent`）中，实现 dom 结构的重构。

在实际前端开发中，有时需要动态调整 HTML 结构，例如为一组已有子元素添加统一的容器以支持样式隔离、动画控

制或响应式布局。jQuery 提供了简洁高效的链式操作方法来完成这类 DOM 重构任务。

核心思路是：先提取 .parent 下的所有子元素，再创建一个新的，将这些子元素追加到该新 div 中，最后将新 div 插入回原 .parent 内部（作为其唯一子元素）。

推荐写法如下：

$('')
  .append($('.parent').children())
  .appendTo('.parent');

✅ 这段代码执行后，原始结构：

  1
  2
  3

将被重构为：

⚠️ 注意事项：

.children() 只选取直接子元素，不会误包后代节点，安全性高；

新建的必须包含结束标签（如或自闭合写法 />），否则在某些 jQuery 版本中可能解析异常（推荐显式写为）；

若 .parent 中存在文本节点（如空格、换行），.children() 默认会忽略它们；如需保留纯文本内容，应额外处理（但本例中无需）；

此操作是一次性结构变更，执行后原子元素已脱离文档流并重新挂载，后续操作请基于新结构进行。

? 小技巧：你也可以使用 .wrapInner() 方法一步实现相同效果，代码更简短：
$('.parent').wrapInner('');
该方法语义更清晰——“将内部所有内容包裹进指定结构”，且兼容性良好（jQuery 1.4+），是更推荐的替代方案。

总结：无论是使用 append().appendTo() 链式构造，还是更语义化的 wrapInner()，都能高效完成 DOM 包裹需求。选择时建议优先考虑可读性与维护性，wrapInner() 在本场景下更为直观可靠。