时间戳

首页 > 解决方案 > 如何通过单击按钮添加一组html元素

javascript - 如何通过单击按钮添加一组html元素

问题描述

我需要设计一个通过单击添加一组 html 元素的按钮。要添加的部分在<section>. 简化结构如下：

<body>    
    <section class="pb-5" id="entrySection_1">
        <div class="container card">
            <div class="row" style="padding-top: 10px;">
                <div class="col-4">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">WO Number</span>
                        </div>
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="col-8">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Status</span>
                        </div>
                        <input type="text" class="form-control">
                    </div>
                </div> 
            </div>
        </div>
    </section> 
</body>

每次用户单击按钮时，<section>都会在前一个 id 之后插入具有新 id 的整个新部分<section>。例如带有 id 的新部分entrySection_2。

有没有一种简单的方法可以将整个部分保存到结构不变的变量中并插入到上一部分之后？

标签： javascripthtmljquery

解决方案

您可以尝试使用 jQuery 的.clone()and.attr()和.insertAfter()喜欢以下方式：

var cloneCount = 1
$('#add').click(function(){
  $('#entrySection_1').clone()
          .attr('id', 'entrySection_'+ ++cloneCount)
          .insertAfter('[id^=entrySection_]:last');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<section class="pb-5" id="entrySection_1">
  <div class="container card">
      <div class="row" style="padding-top: 10px;">
          <div class="col-4">
              <div class="input-group mb-3">
                  <div class="input-group-prepend">
                      <span class="input-group-text" >WO Number</span>
                  </div>
                  <input type="text" class="form-control">
              </div>
          </div>
          <div class="col-8">
              <div class="input-group mb-3">
                  <div class="input-group-prepend">
                      <span class="input-group-text" >Status</span>
                  </div>
                  <input type="text" class="form-control">
              </div>
          </div> 
      </div>
  </div>
</section>

推荐阅读