如何在网站前端动态渲染数量未知的HTML卡片？求助

作为HTML新手，我在开发项目前端逻辑时遇到了问题：项目接收单个输入后，会以HTML卡片形式返回数据库中的相关信息，但我不清楚如何在前端渲染数量未知的卡片。请问是否可以创建card类后通过循环填入所需信息？

完全可以通过循环动态生成卡片，这是前端处理动态内容的常规做法。下面给你两种适合新手的原生JavaScript实现方案：

方法一：DOM操作逐个创建元素（适合理解底层逻辑） #

这种方法一步步构建每个DOM元素，能帮你清晰理解动态渲染的过程：

1. 先准备模拟数据（实际项目中替换为后端接口返回的真实数据）：

// 模拟后端返回的卡片数据
const cardData = [
  {
    imageUrl: "./images/butterfly.jpg",
    description: "这是一只蝴蝶的特写照片",
    likeCount: 5
  },
  {
    imageUrl: "./images/flower.jpg",
    description: "春日绽放的向日葵",
    likeCount: 12
  },
  {
    imageUrl: "./images/bird.jpg",
    description: "林间觅食的小鸟",
    likeCount: 8
  }
];

2. 获取页面中存放卡片的容器：

const cardsContainer = document.querySelector('.cards');

3. 循环遍历数据，创建并组装卡片：

cardData.forEach(item => {
  // 创建卡片外层容器
  const card = document.createElement('div');
  card.classList.add('card');

  // 创建图片元素
  const img = document.createElement('img');
  img.src = item.imageUrl;
  img.alt = item.description;
  img.classList.add('card__image');

  // 创建内容描述区域（注意修正原代码中拼写错误的car__content为card__content）
  const contentDiv = document.createElement('div');
  contentDiv.classList.add('card__content');
  const descText = document.createElement('p');
  descText.textContent = item.description;
  contentDiv.appendChild(descText);

  // 创建点赞信息区域
  const infoDiv = document.createElement('div');
  infoDiv.classList.add('card__info');
  const likeWrap = document.createElement('div');
  
  const likeIcon = document.createElement('span');
  likeIcon.classList.add('material-symbols-outlined');
  likeIcon.textContent = 'favorite';
  
  const likeNum = document.createTextNode(` ${item.likeCount}`);
  likeWrap.appendChild(likeIcon);
  likeWrap.appendChild(likeNum);
  infoDiv.appendChild(likeWrap);

  // 将所有元素组装到卡片中，再添加到页面容器
  card.appendChild(img);
  card.appendChild(contentDiv);
  card.appendChild(infoDiv);
  cardsContainer.appendChild(card);
});

方法二：模板字符串拼接HTML（更简洁高效） #

这种方法通过字符串拼接直接生成完整的卡片HTML，代码更简短，适合快速开发：

const cardData = [/* 同上述模拟数据 */];
const cardsContainer = document.querySelector('.cards');

// 循环拼接所有卡片的HTML代码
let cardsHtml = '';
cardData.forEach(item => {
  cardsHtml += `
    <div class="card">
      <img src="${item.imageUrl}" alt="${item.description}" class="card__image">
      <div class="card__content">
        <p>${item.description}</p>
      </div>
      <div class="card__info">
        <div>
          <span class="material-symbols-outlined">favorite</span>${item.likeCount}
        </div>
      </div>
    </div>
  `;
});

// 将拼接好的HTML插入到页面容器中
cardsContainer.innerHTML = cardsHtml;

关键注意点： #

• 原代码中的car__content是拼写错误，必须改为card__content，否则CSS样式无法正常应用
• 实际项目中，cardData需要通过接口请求获取，比如使用fetch函数调用后端接口
• 如果卡片数量极大，方法一可以搭配DocumentFragment优化性能，避免频繁操作DOM导致页面卡顿

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