如何使用jQuery实现点击指定按钮将目标div追加到已有div中？

没问题，这事儿用jQuery做起来超简单，核心就是绑定按钮的点击事件，然后把你要的div追加到指定容器里就行。我给你一步步拆解清楚：

第一步：确认目标容器的选择器 #

首先你得明确页面上那个“已有div”的选择器——比如它有专属id的话就用#targetDiv，是某个类的容器就用.batchContainer，这个得根据你实际的HTML结构来调整，下面代码就假设你的目标容器id是batchContainer来举例。

第二步：编写jQuery代码 #

你可以把这段代码放在页面底部（或者用$(document).ready()包裹，确保页面DOM加载完成后再执行）：

// 等待页面DOM加载完成再执行代码
$(document).ready(function() {
    // 给指定按钮绑定点击事件
    $('#submitNewBatch').click(function(e) {
        // 如果你不想点击按钮后自动关闭模态框，可以加上这行阻止默认行为
        // e.preventDefault();
        
        // 每次点击都创建一个全新的目标div元素（避免重复移动同一个元素）
        var newBatchCard = $('<div class="col-md-5 cardDisplayingBatches"> <h2>Batch #</h2><hr /> <h3>Info related to this</h3> </div>');
        
        // 把新创建的div追加到目标容器里，记得把#batchContainer换成你实际的容器选择器
        $('#batchContainer').append(newBatchCard);
        
        // 如果需要手动关闭模态框（其实按钮自带的data-dismiss已经会自动关闭，这行可选）
        // $(this).closest('.modal').modal('hide');
    });
});

几个要注意的细节 #

• 避免重复移动元素：如果直接用$('.cardDisplayingBatches').appendTo(...)，那如果页面上已经存在这个div，它会被从原位置移到目标容器，而不是新增一个。所以最好像上面代码那样每次点击都创建新的元素实例，或者如果有隐藏的模板元素，可以用.clone()克隆一个新的：

  // 假设你有个隐藏的模板，id是batchTemplate
  var newBatchCard = $('#batchTemplate').clone().removeAttr('id').show();
  

• 模态框关闭的控制：你的按钮带有data-dismiss="modal"属性，这是Bootstrap自带的模态框关闭逻辑，点击后会自动关闭模态框。如果不需要这个行为，要么删掉这个属性，要么在点击事件里加e.preventDefault()阻止默认动作。
• 确保jQuery已加载：在你的HTML里要先引入jQuery，再引入Bootstrap（如果用到了Bootstrap组件），顺序别搞反了：

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="bootstrap.min.js"></script>
  

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