如何用原生JavaScript和HTML优雅分组展示API返回的项目数据？

调用某API获取了约70个项目的数据，需在网页中展示每个项目的标题、图片和标语。目前已成功将数据渲染到页面，但呈现形式为：先显示70个标题，再显示70张图片，最后显示70条标语。希望每个项目的标题、图片、标语能组合在一起展示，并循环呈现所有项目。

现有代码：

function fetchProjects(url) {
    fetch(url)
        .then(response => {
            return response.json();
        })
        .then(data => {
            appendData(data.data);
        })
        .catch(error => {
            console.log(error);
        });
}

function appendData(data) {

    for (let i = 0; i < data.length; i++) {
        let h3 = document.createElement('h3');
        h3.innerHTML = data[i].project.title;
        document.getElementById('project__header').appendChild(h3);

        let img = new Image();
        img.src = data[i].project.header_image;
        document.getElementById('project__image').appendChild(img);

        let p = document.createElement('p');
        p.innerHTML = data[i].project.tagline;
        document.getElementById('project__tagline').appendChild(p);
    }
}

fetchProjects('api_url');

尝试过重构代码但未成功，也搜索过相关内容但未找到有效解决方案。不想创建70个唯一ID来解决问题，希望用原生JavaScript和HTML实现优雅的解决方案。

核心思路是为每个项目创建独立的容器，把该项目的标题、图片、标语都放入这个容器内，再将容器统一添加到页面的主容器中，而非分散到三个不同的DOM节点。

步骤1：调整HTML结构 #

首先在页面中添加一个主容器，用于承载所有项目：

<div id="projects-container"></div>

步骤2：修改JavaScript代码 #

重写appendData函数，为每个项目创建容器并组装内容：

function fetchProjects(url) {
    fetch(url)
        .then(response => response.json())
        .then(data => appendData(data.data))
        .catch(error => console.log(error));
}

function appendData(data) {
    const projectsContainer = document.getElementById('projects-container');
    
    data.forEach(projectItem => {
        // 创建单个项目的容器
        const projectCard = document.createElement('div');
        // 添加类名，方便后续样式控制
        projectCard.classList.add('project-card');

        // 创建标题元素
        const title = document.createElement('h3');
        title.textContent = projectItem.project.title;

        // 创建图片元素（添加alt属性提升可访问性）
        const img = new Image();
        img.src = projectItem.project.header_image;
        img.alt = projectItem.project.title;

        // 创建标语元素
        const tagline = document.createElement('p');
        tagline.textContent = projectItem.project.tagline;

        // 将元素依次添加到项目容器
        projectCard.appendChild(title);
        projectCard.appendChild(img);
        projectCard.appendChild(tagline);

        // 将组装好的项目卡片添加到主容器
        projectsContainer.appendChild(projectCard);
    });
}

fetchProjects('api_url');

关键改进点 #

• 用forEach替代for循环，代码更简洁易读
• 为每个项目创建独立的div.project-card容器，确保标题、图片、标语绑定为一个整体
• 添加图片alt属性，符合Web可访问性规范
• 所有项目统一挂载到主容器，页面结构更清晰

可选：添加CSS样式优化展示 #

可以给项目卡片添加基础样式，提升视觉效果：

.project-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    max-width: 320px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.project-card img {
    width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 4px;
}

.project-card h3 {
    margin: 0 0 8px;
    color: #2d3748;
}

.project-card p {
    margin: 0;
    color: #4a5568;
}

内容的提问来源于stack exchange，提问作者Jelmer