如何使用jQuery/JavaScript创建Bootstrap卡片实现点击按钮动态生成

步骤1：移除原有静态HTML #

先把页面中你现有的这段卡片静态HTML代码全部删除即可。

步骤2：编写动态生成卡片的函数 #

原有代码中的asp:Label是ASP.NET服务端控件，渲染到前端会转换为普通label/span标签，动态生成时直接替换为对应前端标签即可，我们可以写一个可复用的生成函数：

// 入参index用于区分多张卡片的唯一ID，避免ID重复
function createEntryCard(index = 1) {
  const cardHtml = `
  <div id="divEntryPanel_${index}" class="col-sm-6">
     <div class="card aircat-card-border">
        <div class="card-header bg-info">
           <h5 style="font-weight: bold">附加条目</h5>
        </div>
        <div id="pnlEntry_${index}" class="bg-secondary">
           <div class="pt-2 form-group">
              <label class="row pl-3">预期操作：</label> 
               <textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea1_${index}" cols="50" rows="2" maxlength="2000"></textarea>
               <label class="row pl-3">预计完成日期：</label>
               <textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea2_${index}" cols="50" rows="2" maxlength="2000"></textarea>
               <label class="row pl-3">额外说明：
                 <span class="text-dark small">（最多200字符）</span>
               </label>
               <textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea3_${index}" cols="50" rows="2" maxlength="200"></textarea>
               <div id="EntrySaveBtn_${index}" class="col-md-12 float-right">
                 <label>点击保存条目到当前告警：</label> 
                 <a id="btnSaveEntry_${index}" class="btn btn-success btn-sm ml-2">保存</a>
               </div>
             </div>
          </div>
      </div>
  </div>
  `
  // 这里改成你实际要插入卡片的父容器选择器，比如要放到id为cardWrap的div里就写$('#cardWrap').append(cardHtml)
  $('body').append(cardHtml);
}

如果你需要保留英文文案，直接把上面的中文替换回你原来的英文即可。

步骤3：绑定按钮点击触发生成 #

$(function() {
  let cardIndex = 1;
  // 把#createCardBtn换成你实际触发创建的按钮选择器
  $('#createCardBtn').click(function() {
    createEntryCard(cardIndex);
    cardIndex++;
  })
})

注意事项 #

• 原有代码的runat="server"是服务端标记，前端动态生成不需要加该属性，如果你需要提交数据到服务端，给textarea加对应name属性，或者通过ID获取元素内容提交即可。
• 如果不需要生成多张卡片，每次点击都替换旧卡片，把append方法换成html方法即可，也不需要加索引区分ID。

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