如何用javascript通过按钮在HTML中创建一张卡片？

<button id="createCardBtn">创建卡片</button>
<div id="cardContainer"></div>

const createCardBtn = document.getElementById("createCardBtn");
const cardContainer = document.getElementById("cardContainer");

createCardBtn.addEventListener("click", createCard);

function createCard() {
  // 创建卡片元素
  const card = document.createElement("div");
  card.classList.add("card");
  
  // 设置卡片内容
  card.innerHTML = "这是一张卡片";
  
  // 将卡片添加到容器中
  cardContainer.appendChild(card);
}

.card {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}