JavaScript如何实现点击按钮动态添加含图文的卡片元素

完全可以通过原生JavaScript根据用户输入动态生成包含文本、图片的卡片，和你现有静态卡片的结构、样式完全兼容，具体实现如下：

前置准备 #

首先在页面中预留用户输入区域和卡片挂载容器，基础结构如下：

<!-- 用户输入区域 -->
<div style="margin: 20px 0; padding: 15px; border: 1px solid #eee;">
  <div style="margin: 8px 0;">
    <label>用户名：</label>
    <input type="text" id="usernameInput" placeholder="请输入发布用户名">
  </div>
  <div style="margin: 8px 0;">
    <label>图片名称：</label>
    <input type="text" id="imgNameInput" placeholder="例如Logo.png">
  </div>
  <div style="margin: 8px 0;">
    <label>图片地址：</label>
    <input type="text" id="imgUrlInput" placeholder="请输入图片访问路径">
  </div>
  <div style="margin: 8px 0;">
    <label>卡片描述：</label>
    <input type="text" id="contentInput" placeholder="请输入卡片文本内容">
  </div>
  <button id="addCardBtn" style="margin-top: 10px;">新增卡片</button>
</div>

<!-- 卡片挂载容器，和你原有Bootstrap布局完全一致 -->
<div class="container-fluid">
  <div class="row" id="cardContainer">
    <!-- 动态生成的卡片会插入到这个节点下 -->
  </div>
</div>

核心JS实现 #

以下代码可以直接运行，生成的卡片结构和你给出的静态卡片完全一致，原有CSS样式会自动生效：

// 工具方法：按示例格式生成当前发布时间
function getFormatTime() {
  const now = new Date();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const year = now.getFullYear();
  let hour = now.getHours();
  const minute = now.getMinutes().toString().padStart(2, '0');
  const timePeriod = hour >= 12 ? 'PM' : 'AM';
  hour = hour > 12 ? hour - 12 : hour;
  return `${month}/${day}/${year} at ${hour}:${minute}${timePeriod}`;
}

/**
 * 生成并插入图文卡片
 * @param {Object} cardInfo 卡片信息
 * @param {string} cardInfo.username 发布用户名
 * @param {string} cardInfo.imgName 图片名称
 * @param {string} cardInfo.imgUrl 图片访问地址
 * @param {string} cardInfo.content 卡片文本描述
 */
function createCard(cardInfo) {
  const container = document.getElementById('cardContainer');
  // 创建列节点
  const colNode = document.createElement('div');
  colNode.className = 'col';
  // 拼接卡片内部结构
  colNode.innerHTML = `
    <div class="card">
      <div class="card-user"><h5>${cardInfo.username} posted:</h5></div>
      <div class="card-header"><h3>${cardInfo.imgName}</h3></div>
      <img class="card-img-top" src="${cardInfo.imgUrl}" alt="${cardInfo.imgName}">
      <div class="card-body"><h5>${cardInfo.content}</h5></div>
      <div class="card-footer">${getFormatTime()}</div>
    </div>
  `;
  // 将卡片插入容器
  container.appendChild(colNode);
}

// 绑定新增按钮点击事件，读取用户输入生成卡片
document.getElementById('addCardBtn').addEventListener('click', () => {
  // 读取输入值，做默认值兜底
  const cardInfo = {
    username: document.getElementById('usernameInput').value.trim() || '匿名用户',
    imgName: document.getElementById('imgNameInput').value.trim() || '未命名图片',
    imgUrl: document.getElementById('imgUrlInput').value.trim(),
    content: document.getElementById('contentInput').value.trim() || '暂无描述'
  };
  // 简单校验图片地址必填
  if (!cardInfo.imgUrl) {
    alert('请输入图片地址');
    return;
  }
  // 调用方法生成卡片
  createCard(cardInfo);
});

扩展说明 #

• 如果你需要支持用户本地上传图片，只需要把图片地址输入框替换为file类型的上传控件，上传后将图片转为base64格式地址传入imgUrl参数即可，其余逻辑不需要修改
• 生成的卡片类名和你原有静态卡片完全一致，不需要额外调整CSS样式
• 发布时间会自动读取当前系统时间，按你给出的格式自动生成，不需要用户手动输入

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