JavaScript DOM操作如何实现动态分组并包裹HTML元素

在前端页面开发中，经常会遇到需要对多个零散的HTML元素进行归类整理的场景，比如将同一类别的列表项、同一区域的卡片元素统一包裹到一个容器节点中，通过JavaScript DOM操作可以高效实现动态分组并包裹元素的需求。

核心实现思路

动态分组并包裹HTML元素的整体流程可以分为三个步骤：首先通过DOM选择器获取所有需要处理的原始元素，然后按照预设的分组规则对元素进行分类，最后为每个分组创建新的容器节点，将分组内的元素插入容器并替换原来的位置。

用到的核心DOM方法

• querySelectorAll：用于获取页面中所有符合选择器的元素集合，返回NodeList对象
• createElement：创建新的HTML元素节点，作为分组的容器
• appendChild：将子节点插入到父节点的子节点列表末尾
• insertBefore：在指定的已有子节点前插入新的子节点
• parentNode：获取当前元素的父节点，用于后续的位置替换操作

基础示例：按固定数量分组包裹元素

假设页面中有10个<div class="item">元素，需要每3个分为一组，包裹到<div class="group">容器中，实现代码如下：

// 获取所有需要分组的元素
const items = document.querySelectorAll('.item');
// 定义每组的数量
const groupSize = 3;
// 存储所有分组的容器
const groups = [];

for (let i = 0; i < items.length; i += groupSize) {
    // 创建分组容器
    const group = document.createElement('div');
    group.className = 'group';
    // 切割当前分组的元素
    const currentGroupItems = Array.from(items).slice(i, i + groupSize);
    // 将元素插入分组容器
    currentGroupItems.forEach(item => {
        group.appendChild(item);
    });
    groups.push(group);
}

// 将分组插入到原第一个元素的父节点中
if (items.length > 0) {
    const parent = items[0].parentNode;
    const firstItem = items[0];
    groups.forEach(group => {
        parent.insertBefore(group, firstItem);
    });
}

进阶示例：按自定义属性分组包裹

如果元素带有自定义属性data-category，需要按照属性值分组，相同属性值的元素包裹到同一个容器中，实现代码如下：

// 获取所有目标元素
const items = document.querySelectorAll('[data-category]');
// 存储分组映射，key是分类值，value是该分类的元素数组
const categoryMap = {};

// 遍历元素，按分类归类
items.forEach(item => {
    const category = item.getAttribute('data-category');
    if (!categoryMap[category]) {
        categoryMap[category] = [];
    }
    categoryMap[category].push(item);
});

// 遍历分组映射，创建容器并包裹元素
Object.keys(categoryMap).forEach(category => {
    const group = document.createElement('div');
    group.className = `group-${category}`;
    // 给容器添加分类标识
    group.setAttribute('data-group-category', category);
    // 将分类下的所有元素插入容器
    categoryMap[category].forEach(item => {
        group.appendChild(item);
    });
    // 插入到原第一个元素的父节点
    if (categoryMap[category].length > 0) {
        const parent = categoryMap[category][0].parentNode;
        parent.insertBefore(group, categoryMap[category][0]);
    }
});

注意事项

• 使用querySelectorAll返回的是类数组对象，需要使用Array.from转换为数组后再使用数组的slice等方法
• 操作DOM时如果原始元素已经被插入到其他节点，会自动从原来的位置移除，不需要手动删除
• 如果分组后需要保留原始元素的事件监听，直接移动元素不会丢失事件，因为事件绑定在元素本身上
• 批量操作DOM时建议先创建文档片段DocumentFragment，减少页面重绘次数，提升性能

性能优化方案

当需要分组的元素数量较多时，频繁操作DOM会导致页面性能下降，可以使用DocumentFragment优化，示例代码如下：

const items = document.querySelectorAll('.item');
const groupSize = 3;
const parent = items[0]?.parentNode;
// 创建文档片段，减少DOM操作次数
const fragment = document.createDocumentFragment();

for (let i = 0; i < items.length; i += groupSize) {
    const group = document.createElement('div');
    group.className = 'group';
    const currentGroupItems = Array.from(items).slice(i, i + groupSize);
    currentGroupItems.forEach(item => {
        group.appendChild(item);
    });
    fragment.appendChild(group);
}

// 一次性将文档片段插入页面
if (parent) {
    parent.appendChild(fragment);
}

JavaScriptDOM操作动态分组包裹HTML元素HTML修改时间：2026-07-05 06:21:21