从Javascript数组和不同行和列中的Bootstrap生成动态卡HTML卡

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

var cardsData = [
  { title: "Card 1", image: "image1.jpg", text: "This is card 1." },
  { title: "Card 2", image: "image2.jpg", text: "This is card 2." },
  { title: "Card 3", image: "image3.jpg", text: "This is card 3." }
];

var cardContainer = document.getElementById("card-container"); // 获取包含卡片的容器元素

for (var i = 0; i < cardsData.length; i++) {
  var card = document.createElement("div"); // 创建卡片容器
  card.classList.add("card"); // 添加Bootstrap卡片样式类

  var cardImage = document.createElement("img"); // 创建卡片图片元素
  cardImage.src = cardsData[i].image; // 设置图片路径
  cardImage.classList.add("card-img-top"); // 添加Bootstrap卡片图片样式类
  card.appendChild(cardImage); // 将图片添加到卡片容器中

  var cardBody = document.createElement("div"); // 创建卡片内容容器
  cardBody.classList.add("card-body"); // 添加Bootstrap卡片内容样式类

  var cardTitle = document.createElement("h5"); // 创建卡片标题元素
  cardTitle.classList.add("card-title"); // 添加Bootstrap卡片标题样式类
  cardTitle.innerText = cardsData[i].title; // 设置标题文本
  cardBody.appendChild(cardTitle); // 将标题添加到卡片内容容器中

  var cardText = document.createElement("p"); // 创建卡片文本元素
  cardText.classList.add("card-text"); // 添加Bootstrap卡片文本样式类
  cardText.innerText = cardsData[i].text; // 设置文本内容
  cardBody.appendChild(cardText); // 将文本添加到卡片内容容器中

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