从javascript数组生成动态HTML卡

// 数据数组
var cardsData = [
  { title: 'Card 1', description: 'This is card 1.', image: 'image1.jpg' },
  { title: 'Card 2', description: 'This is card 2.', image: 'image2.jpg' },
  { title: 'Card 3', description: 'This is card 3.', image: 'image3.jpg' }
];

// 获取容器元素
var container = document.getElementById('card-container');

// 遍历数组
for (var i = 0; i < cardsData.length; i++) {
  // 创建卡片元素
  var card = document.createElement('div');
  card.className = 'card';

  // 创建标题元素
  var title = document.createElement('h3');
  title.textContent = cardsData[i].title;

  // 创建描述元素
  var description = document.createElement('p');
  description.textContent = cardsData[i].description;

  // 创建图片元素
  var image = document.createElement('img');
  image.src = cardsData[i].image;

  // 将元素添加到卡片中
  card.appendChild(title);
  card.appendChild(description);
  card.appendChild(image);

  // 将卡片添加到容器中
  container.appendChild(card);
}