如何解决动态下拉菜单 ID 冲突导致按钮文本无法正确更新的问题

以下是完整可运行示例：

  
      
     Modifier:                — Select —         Public         Private         Protected                 Name:                 Value (optional):               
    
     + Add Attribute     Submit Form   
 

// 添加新属性组 document.forms.form01.addattribute.addEventListener('click', function(e) {   const template = document.getElementById('fieldset');   const clone = template.content.firstElementChild.cloneNode(true);    const form = e.target.form;   const existingFieldsets = form.querySelectorAll('fieldset[name="attribute"]');    if (existingFieldsets.length > 0) {     existingFieldsets[existingFieldsets.length - 1].insertAdjacentElement('afterend', clone);   } else {     form.insertAdjacentElement('afterbegin', clone);   } });  // 表单提交：收集所有属性数据 document.forms.form01.addEventListener('submit', function(e) {   e.preventDefault();    const fieldsets = this.querySelectorAll('fieldset[name="attribute"]');   const data = Array.from(fieldsets).map(fs => ({     modifier: fs.elements.modifier.value,     name: fs.elements.name.value.trim(),     value: fs.elements.value.value.trim() || null   }));    console.log('Submitted attributes:', data);   // ✅ 此处可发送至后端：fetch('/api/attributes', { method: 'POST', body: jsON.stringify(data) }) });

? 关键优势说明：

• 零 ID 依赖：每个
  
  是独立作用域，fs.elements.modifier 永远精准指向该组内的 ，无需 getElementById。
• 自动状态同步： 的 value 属性天然反映用户选择，changeButtonName 函数完全不再需要。
• 可访问性增强： 包裹 和 ，屏幕阅读器可正确识别关联关系。
• 扩展性强：如需添加“删除”按钮，只需在
  
  内插入 ×, 并监听其 click 事件调用 this.closest(‘fieldset’).remove()。
• 无闭包陷阱：DOM 查询基于实时结构（fs.elements.xxx），不依赖任何外部变量生命周期。

⚠️ 注意事项：

• 若必须保留 Bootstrap 下拉样式（非原生 ），请改用 Bootstrap 的 JavaScript Dropdown API 动态初始化，并通过 data-bs-parent 或 closest(‘fieldset’) 定位上下文，而非 ID。
• 避免在循环中为事件处理器使用 var 声明变量（ES5 问题），若坚持用 ID 方案，请改用 let buttonId = … + 箭头函数确保块级作用域绑定。
• 所有动态元素应通过 template 元素克隆，避免 innerhtml 注入 xss 风险。

这种结构化、语义化的写法，不仅解决了你的 ID “卡死”问题，更让代码具备可测试性、可维护性和无障碍友好性——这才是专业前端开发的实践起点。