如何用JavaScript将父元素包裹在每三个子元素周围

在网页布局或内容重组时，有时需要把容器里的子元素按固定数量分组，并为每一组套上一个共同的父元素。使用JavaScript可以很方便地操作DOM来完成这件事，下面以每三个子元素包裹一个父元素为例进行说明。

实现思路

核心步骤是先拿到原容器中的所有子元素，然后从头开始每三个为一组，动态创建新的父元素，将这组子元素依次添加到新父元素中，最后把新父元素插回原容器。需要注意的是，在移动子元素时，由于节点会从原位置移除，直接基于实时子节点列表遍历容易出错，因此通常先转为静态数组再处理。

基础实现代码

以下代码演示了如何把 id 为 list 的容器里每三个子元素用一个新的 div.group 包裹起来：

// 获取原容器
var container = document.getElementById('list');
// 将子元素转为数组，避免实时列表导致遍历异常
var children = Array.prototype.slice.call(container.children);
var groupSize = 3;

for (var i = 0; i < children.length; i += groupSize) {
  // 创建包裹用的父元素
  var group = document.createElement('div');
  group.className = 'group';

  // 取出当前组的子元素
  var slice = children.slice(i, i + groupSize);
  slice.forEach(function (item) {
    group.appendChild(item);
  });

  // 将新父元素插入原容器
  container.appendChild(group);
}

使用 DocumentFragment 优化

如果希望减少直接操作原容器带来的多次重排，也可以先使用 DocumentFragment 收集所有新分组，最后一次性加入页面：

var container = document.getElementById('list');
var children = Array.prototype.slice.call(container.children);
var fragment = document.createDocumentFragment();
var groupSize = 3;

for (var i = 0; i < children.length; i += groupSize) {
  var group = document.createElement('div');
  group.className = 'group';
  var slice = children.slice(i, i + groupSize);
  slice.forEach(function (item) {
    group.appendChild(item);
  });
  fragment.appendChild(group);
}

container.appendChild(fragment);

注意事项

• 遍历前一定要把子元素列表复制成静态数组，否则在移动节点时原 children 长度会变化。
• 新创建的父元素可以按需设置类名或属性，方便后续用 CSS 控制样式。
• 若子元素总数不是三的倍数，最后一组会自动包含剩余不足三个的元素，通常无需额外处理。

小结

通过上述方式，我们可以在不借助任何库的情况下，用原生 JavaScript 轻松实现每三个子元素外包裹一个父元素的需求。理解这种 DOM 分组方法，有助于在列表重组、响应式布局等场景中编写更灵活的脚本。

JavaScriptDOM操作wrap_parent修改时间：2026-07-26 09:48:16