如何为JavaScript动态生成的HTML标签添加唯一ID（Bootstrap卡片场景）

实现方案 #

你原有代码存在两个核心问题：

1. AddCard 函数内的卡片模板是硬编码的固定ID，每次生成卡片时元素ID都会重复
2. CreateEntry 中的jQuery选择器语法错误，混淆了input和textarea元素，DOM拼接逻辑也和你需要的Bootstrap卡片结构不匹配

第一步：定义全局自增计数器 #

在全局作用域维护一个自增计数器，每次新增卡片自动+1，保证所有元素ID全局唯一：

// 全局ID计数器，初始值可自定义
let cardCounter = 1;

第二步：改造AddCard函数，动态生成唯一ID #

直接在模板字符串中用计数器作为后缀生成动态ID，不需要生成卡片后再单独修改ID：

var AddCard = function() {
  // 取当前计数器值作为本次卡片的唯一标识
  const currentId = cardCounter++;
  const card =
                ` <div class="card aircat-card-border">
       <div class="card-header bg-info">
          <h5 style="font-weight: bold">Additional Entry</h5>
       </div>
       <div id="pnlEntry_${currentId}" class="bg-secondary">
          <div class="pt-2 form-group">

             <Label Class="row pl-3" runat="server">Detailed Action:</Label>
             <textarea  style="width: 100%;" class="form-control form-control-sm" id="txtEngrActionDesc2_${currentId}" runat="server" cols="50" rows="2" ></textarea>

             <Label Class="row pl-3" runat="server" >IAW:</Label>
             <textarea  style="width: 100%;" class="form-control form-control-sm" id="txtEngrIAW2_${currentId}"
             runat="server" cols="50" rows="2" maxlength="2000"></textarea>

             <Label Class="row pl-3" runat="server">Discrepancy Narrative:
             <Label Class="text-dark small" runat="server"> 
             </Label>(200 Character Limit)</Label>
             <textarea  style="width: 100%;" class="form-control form-control-sm" 
              id="txtEngrDiscrepNarrative2_${currentId}"
             runat="server" cols="50" rows="2" maxlength="200"></textarea>
                                
            
               <Label runat="server">Click to save this entry to the alert:</Label>
               <a id="btnSaveEntry_${currentId}"  class="btn btn-success btn-sm ">Save</a>
            
         </div>
      </div>
  </div> `

            const mainDiv = document.getElementById("divEntryPanel");
            mainDiv.innerHTML += card
            document.getElementById("divEntryPanel").style.display = "inline";
            // 返回当前卡片ID用于后续赋值、绑定事件
            return currentId;
}

第三步：简化赋值逻辑，废弃错误的CreateEntry写法 #

直接在生成卡片后通过动态ID选中对应textarea赋值即可，不需要额外拼接DOM：

var AddDetailsFunc = function (entryList) {
            $.unblockUI();
            // 遍历条目列表批量生成卡片
            entryList.forEach(entry => {
                const currentCardId = AddCard();
                // 给对应textarea赋值
                $(`#txtEngrActionDesc2_${currentCardId}`).val(entry.DA || '');
                $(`#txtEngrIAW2_${currentCardId}`).val(entry.IAW || '');
                $(`#txtEngrDiscrepNarrative2_${currentCardId}`).val(entry.DN || '');
                // 可直接给当前卡片的保存按钮绑定专属点击事件
                $(`#btnSaveEntry_${currentCardId}`).on('click', function() {
                    // 保存时直接通过currentCardId获取三个textarea的值即可
                    const actionDesc = $(`#txtEngrActionDesc2_${currentCardId}`).val();
                    const iaw = $(`#txtEngrIAW2_${currentCardId}`).val();
                    const discrepNarrative = $(`#txtEngrDiscrepNarrative2_${currentCardId}`).val();
                    // 后续提交逻辑自行补充
                })
            });
        }

补充说明 #

• 如果页面刷新后仍需要保持ID不重复，可以把计数器值存在localStorage中，页面加载时读取上次的最大值即可
• 所有ID用下划线分隔前缀和序号，可读性更强，也能避免选择器写错
• 已顺手修正原代码中按钮文字的拼写错误Clcik为Click

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