基于Bootstrap Modal与JavaScript实现点击模态按钮动态创建按钮的问询

我明白你的需求啦——点击Bootstrap模态框里的蓝色按钮后，在页面中「+」按钮的旁边动态生成一个同款蓝色按钮。下面是完整的可运行实现方案，我把代码拆分并做了细节说明：

1. 完整HTML结构（含模态框和「+」按钮区域） #

这部分包含了触发模态框的「+」按钮、模态框的结构，以及承载新按钮的容器：

<!-- 「+」按钮所在区域 -->
<div class="card border-secondary mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <div id="result">
      <span id="first">
        <button type="button" class="btn btn-primary plusbtn" data-toggle="modal" data-target="#mymodal">
          +
        </button>
      </span>
    </div>
  </div>
</div>

<!-- Bootstrap模态框 -->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">选择按钮样式</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- 模态框内的蓝色按钮 -->
      <div class="modal-body">
        <button type="button" class="btn btn-primary btnWH " id="blue"></button>
      </div>
    </div>
  </div>
</div>

2. 点击事件处理的JavaScript代码 #

这段代码负责监听模态框内蓝色按钮的点击事件，并动态创建新按钮添加到「+」按钮旁：

window.onload = function(){
  // 获取模态框中的蓝色按钮
  var blue = document.getElementById('blue');
  blue.onclick = function(){
    // 移除点击事件，防止重复点击创建多个按钮
    blue.onclick = null;
    // 获取承载新按钮的父容器
    var result = document.getElementById('result');
    // 创建新的容器包裹按钮（也可以直接创建按钮元素）
    var newblue = document.createElement('span');
    newblue.id = 'newblue';
    // 插入按钮HTML代码，注意转义字符的处理
    newblue.innerHTML += '<button type="button" class="btn btn-primary btnWH " id="blue"></button>';
    // 将新按钮添加到目标区域
    result.appendChild(newblue);
    // 可选：点击后自动关闭模态框，提升用户体验
    $('#mymodal').modal('hide');
  };
};

小优化建议 #

用innerHTML插入HTML字符串虽然简单，但如果内容不可控存在XSS风险，更规范安全的方式是直接创建按钮元素：

// 替代innerHTML的写法，更安全可控
var newBtn = document.createElement('button');
newBtn.type = 'button';
newBtn.className = 'btn btn-primary btnWH';
// 注意：如果要创建多个按钮，不要重复使用相同的id，建议移除id或者用动态命名（比如newblue-1、newblue-2）
// newBtn.id = 'newblue';
result.appendChild(newBtn);

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