本篇文章向大家介绍《JavaScript与jQuery动态生成分组HTML元素》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

本教程详细阐述如何利用JavaScript和jQuery，从结构化数据中高效动态生成分组的HTML元素，例如带有图片和链接的按钮组。文章将重点介绍如何通过数组切片（slice）和映射（map）的方法，将数据按指定大小分块，并将其转化为可直接插入DOM的HTML字符串，从而避免传统循环嵌套append可能导致的逻辑问题和性能瓶颈，确保页面内容的正确渲染和优化。

动态生成分组HTML元素的挑战

在前端开发中，我们经常需要根据后端返回的数据或本地静态数据，动态地生成大量的HTML元素。一个常见的场景是创建类似轮播图（carousel）或网格布局，其中每个“页面”或“行”包含固定数量的子元素。例如，从一个包含多个按钮信息的数组中，每15个按钮组成一个carousel-item，每个按钮内部包含一个链接和一张图片。

传统的做法可能会尝试使用嵌套的for循环和jQuery的append()方法。然而，在append()内部的函数中，return语句一旦执行，就会立即退出当前函数，导致只添加第一个元素，而不是循环中生成的所有元素。这使得直接在append()内部构建复杂的多元素结构变得困难且容易出错。

// 常见但存在问题的尝试
$(document).ready(function () {
    let testButtonEntries = [ /* ... 大量按钮数据 ... */ ];

    // 这种方式在append内部的return会导致问题
    for (let sections = 0; sections <= testButtonEntries.length % 15; sections++) {
        $('
')
            .append($('
').append(function () {
                for (let i = 0; i < 15; i++) {
                    // 这里每次循环都会return，导致只添加第一个元素
                    return $('
')
                        .append($('', {
                            href: testButtonEntries[i].link,
                            title: testButtonEntries[i].button_title,
                            target: '_blank'
                        }).append($('', {
                            alt: testButtonEntries[i].button_alt_text,
                            class: 'img-responsive',
                            src: 'images/' + testButtonEntries[i].button_image + '.png'
                        })));
                }
            }))
            .appendTo($('#employee-button-container'));
    }
});

解决方案：数据分块与声明式HTML生成

为了高效且正确地解决这个问题，我们可以采用以下两步策略：

1. 数据分块（Chunking Data）：将原始数据数组按照预设的大小（例如每15个元素）分割成多个子数组。
2. 声明式HTML生成（Declarative HTML Generation）：利用JavaScript的数组map()方法，将每个子数组转换为对应的HTML字符串片段，最终拼接成完整的HTML结构。

1. 数据分块

首先，我们需要将原始的按钮数据数组testButtonEntries按照每15个元素进行分块。这可以通过while循环结合splice()方法实现。splice()方法会修改原数组，并返回被移除的元素组成的新数组。

$(document).ready(function () {
    const testButtonEntries = [
        // 示例数据，实际应用中会更多
        { button_title: 'Employee Button 1', button_alt_text: 'Alt 1', button_image: 'img1', link: '#link1' },
        { button_title: 'Employee Button 2', button_alt_text: 'Alt 2', button_image: 'img2', link: '#link2' },
        // ... 省略更多数据，假设总共有16个或更多数据
        { button_title: 'Employee Button 15', button_alt_text: 'Alt 15', button_image: 'img15', link: '#link15' },
        { button_title: 'Employee Button 16', button_alt_text: 'Alt 16', button_image: 'img16', link: '#link16' }
    ];

    const rows = []; // 用于存储分块后的数组
    const chunkSize = 15; // 每块的元素数量

    // 当原始数组还有元素时，持续进行分块
    while (testButtonEntries.length > 0) {
        // 使用splice从testButtonEntries中移除chunkSize个元素，并将其添加到rows
        rows.push(testButtonEntries.splice(0, chunkSize));
    }

    // 此时，rows 数组将包含多个子数组，每个子数组最多包含 chunkSize 个元素
    // 例如：rows = [[item1..item15], [item16]]

    // ... 后续的HTML生成代码将在这里
});

2. 声明式HTML生成

一旦数据被分块，我们就可以使用map()方法来遍历这些分块，并为每个分块生成相应的HTML结构。这种方法使得代码更具声明性，易于理解和维护。

$(document).ready(function () {
    const testButtonEntries = [
        // ... 同上，示例数据 ...
    ];

    const rows = [];
    const chunkSize = 15;

    while (testButtonEntries.length > 0) {
        rows.push(testButtonEntries.splice(0, chunkSize));
    }

    // 使用map将每个分块（row）转换为一个carousel-item的HTML字符串
    const generatedHtmlChunks = rows.map((row) => {
        // 对于每个row（即一个carousel-item内部的数据），再次使用map生成其内部的按钮HTML
        const innerElementsHtml = row.map((ele) => {
            const { button_title, link, button_image, button_alt_text } = ele;
            // 使用模板字符串构建每个按钮的HTML
            return `
                

                    
                        
                    
                
            `;
        }).join(''); // 将所有按钮的HTML字符串拼接起来

        // 返回一个完整的carousel-item的HTML字符串
        return `
            

                

                    ${innerElementsHtml}
                
            
        `;
    });

    // 将所有生成的HTML字符串拼接成一个大字符串，并一次性插入到DOM中
    $("#employee-button-container").html(generatedHtmlChunks.join(''));
});

完整示例代码

将上述两部分结合，形成完整的解决方案：

    
    
    
    
    



    
动态按钮组生成示例
    

        
    

    

注意事项与总结

1. 效率提升：相较于在循环中多次操作DOM（每次append()都会触发DOM重绘），这种方法先将所有HTML构建成一个字符串，然后通过html()或append()一次性插入DOM，可以显著减少DOM操作次数，提高页面渲染性能。
2. 代码可读性与维护性：使用map()和模板字符串（Template Literals）使得HTML结构与数据逻辑分离，代码更清晰，易于理解和修改。
3. splice()对原数组的影响：Array.prototype.splice()方法会修改原始数组。如果需要保留原始数据，应先创建数组的副本（例如使用slice()方法：const tempArray = [...testButtonEntries]; 或 const tempArray = testButtonEntries.slice();），再对副本进行splice操作。在本例中，修改原数组是可接受的。
4. 图片路径：示例中假设图片路径为images/${button_image}.png，请根据实际项目中的图片存放路径和命名规则进行调整。
5. 错误处理：在实际应用中，应考虑数据为空或数据格式不正确的情况，添加相应的错误处理逻辑。

通过这种数据分块和声明式HTML生成的方法，我们可以优雅且高效地解决动态生成复杂分组HTML元素的挑战，确保代码的健壮性和性能。

今天关于《JavaScript动态生成分组HTML元素方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！