如何用JavaScript和jQuery高效动态生成分组HTML元素

在前端开发的实际场景中，我们经常需要处理后端返回的分组数据结构，比如按照类别分组的商品列表、按照部门分组的员工信息等，需要将这些分组数据动态渲染成对应的HTML元素展示在页面上。如果采用不当的实现方式，很容易出现代码冗余、页面渲染卡顿的问题，下面分别介绍原生JavaScript和jQuery的高效实现方案。

原生JavaScript实现方案

原生JavaScript实现分组元素动态生成时，核心思路是先构建文档片段，完成所有元素创建后再一次性插入到页面中，减少DOM重绘重排的次数。假设我们有如下分组数据：

// 模拟分组数据，外层是分组名称，内层是分组下的元素列表
const groupData = {
    '数码产品': ['手机', '电脑', '平板'],
    '家居用品': ['沙发', '台灯', '衣柜'],
    '食品饮料': ['牛奶', '面包', '可乐']
};

接下来使用文档片段的方式生成分组元素：

// 获取容器元素
const container = document.getElementById('group-container');
// 创建文档片段，减少DOM操作次数
const fragment = document.createDocumentFragment();

// 遍历分组数据
for (const groupName in groupData) {
    // 创建分组标题元素
    const groupTitle = document.createElement('h3');
    groupTitle.textContent = groupName;
    fragment.appendChild(groupTitle);

    // 创建分组内容容器
    const groupList = document.createElement('ul');
    // 遍历分组下的元素
    groupData[groupName].forEach(item => {
        const listItem = document.createElement('li');
        listItem.textContent = item;
        groupList.appendChild(listItem);
    });
    fragment.appendChild(groupList);
}

// 一次性将文档片段插入容器，只触发一次重绘重排
container.appendChild(fragment);

jQuery实现方案

jQuery提供了更简洁的DOM操作API，同样可以通过构建临时容器的方式减少DOM操作次数，实现高效的分组元素生成。使用同样的模拟分组数据：

// 模拟分组数据
const groupData = {
    '数码产品': ['手机', '电脑', '平板'],
    '家居用品': ['沙发', '台灯', '衣柜'],
    '食品饮料': ['牛奶', '面包', '可乐']
};

// 获取容器
const $container = $('#group-container');
// 创建临时div作为缓存容器，避免多次操作页面DOM
const $tempContainer = $('<div></div>');

// 遍历分组数据
$.each(groupData, function(groupName, itemList) {
    // 添加分组标题
    $tempContainer.append('<h3>' + groupName + '</h3>');
    // 创建无序列表
    const $ul = $('<ul></ul>');
    // 遍历分组内元素
    $.each(itemList, function(index, item) {
        $ul.append('<li>' + item + '</li>');
    });
    $tempContainer.append($ul);
});

// 一次性将临时容器的内容插入页面容器
$container.append($tempContainer.html());

两种方案对比与优化建议

我们可以通过下表对比两种实现方式的特点：

在实际开发中，还可以结合以下优化技巧提升生成效率：

• 尽量避免在循环内部直接操作页面DOM，优先使用文档片段或者临时容器缓存元素
• 如果分组数据量非常大，可以考虑分页渲染或者虚拟滚动，避免一次性生成过多元素导致页面卡顿
• 对于重复使用的元素结构，可以提前定义模板，避免重复创建元素时重复编写结构代码

注意事项

在动态生成HTML元素时，如果内容包含用户输入的数据，一定要注意防范XSS攻击，不要直接将未转义的内容插入到HTML中。如果是原生JavaScript，可以使用textContent属性赋值，jQuery可以使用text()方法，避免内容被解析为HTML标签。如果确实需要插入HTML内容，要对特殊字符进行转义处理。

JavaScriptjQuery动态生成HTML分组元素前端开发修改时间：2026-06-03 01:13:25