如何通过JavaScript在HTML中实现点击添加按钮新增表单

现有代码的问题分析 #

• HTML存在语法错误：data-bs-toggle="<dropdown"多了左尖括号，导致下拉菜单无法正常工作。
• 重复ID问题：克隆带有唯一ID的元素会导致页面出现多个相同ID的DOM节点，违反HTML规范且会引发选择器冲突。
• Bootstrap组件未重新初始化：克隆后的下拉菜单没有被Bootstrap初始化，点击不会展开。
• 容器结构不合理：模板表单直接放在目标容器内，首次克隆会导致容器内出现重复的初始表单。

修改后的完整实现代码 #

HTML部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- 隐藏的模板容器，存放要克隆的表单结构 -->
<div style="display: none;" id="form-template">
  <form class="add-order-form mb-3">
    <div class="row add-order-info text-center">
      <div class="col"> 
        <div class="dropdown">
          <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
            Select...
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Mouse</a></li>
            <li><a class="dropdown-item" href="#">Monitor</a></li> 
            <li><a class="dropdown-item" href="#">Keyboard</a></li>
          </ul>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- 存放新增表单的容器，初始隐藏 -->
<div style="display: none;" id="form-container"></div>

<button type="button" onclick="addForm();" id="add-button">Add</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

JavaScript部分

function addForm() {
  // 显示表单容器
  const container = document.getElementById('form-container');
  container.style.display = 'block';
  
  // 克隆模板表单
  const template = document.getElementById('form-template');
  const newForm = template.querySelector('.add-order-form').cloneNode(true);
  
  // 添加到容器
  container.appendChild(newForm);
  
  // 重新初始化新克隆的下拉菜单
  const dropdownBtn = newForm.querySelector('[data-bs-toggle="dropdown"]');
  new bootstrap.Dropdown(dropdownBtn);
}

关键改动说明 #

1. 分离模板与容器：将可复用的表单模板放在独立的隐藏容器中，避免初始结构干扰新增逻辑。
2. 替换ID为类：把原#add-order-form改为.add-order-form，避免克隆后出现重复ID。
3. 修复语法错误：修正data-bs-toggle的属性值，确保下拉菜单基础功能正常。
4. 初始化克隆组件：克隆完成后，手动初始化新的下拉菜单，保证Bootstrap交互功能生效。
5. 优化容器显示逻辑：仅在首次添加时显示容器，避免初始状态下的空白区域。

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