如何通过Jquery添加分层html元素

Question

我的html页面中有引导Accordian：link

现在，html中有一个按钮（在同一页面上出现不止一次），点击该按钮，打开一个包含手风琴的bootstrap-modal。

问题是，标签不是用该手风琴固定的，它可以有不同数量的标签，具体取决于它打开的按钮。

所以，我必须通过JavaScript动态添加手风琴标签，特别是这段代码：

<div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

我知道在Jquery中有一个 .add（）函数，但是在这里，我希望在日常工作中添加许多div，如果我用这种方法添加它（请参考链接）会变得很麻烦。

请建议一些通过JavaScript在html中动态添加1个以上元素的优化方法。

感谢。