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

我的html页面中有引导程序：

现在，html中有一个按钮（在同一页面上多次出现），单击该按钮，将打开一个包含手风琴的引导模式

问题是，标签不是固定在手风琴中的，它可以有不同数量的标签，这取决于从哪个按钮打开

因此，我必须通过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>

动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅，非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时，圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤从工艺啤酒场到餐桌，生料牛仔布美学合成物，你可能还没听说过accusamus labore可持续VHS。

我知道Jquery中有一个.add（）函数，但在这里，我想以继承的方式添加许多div，如果用这种方法添加它（请参阅链接），会变得很麻烦

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

---

谢谢。

您可以使用

.append（）

（）或

.html（）

（）谢谢！，我本来想使用.html（），但后来我认为它不能一次添加多个元素。如果您只想附加代码，我建议您使用

.append（）

，因为它看起来（而且）更简单。虽然也可以使用

.html（）

，但请检查以下内容：