如何在JavaScript中动态添加折叠

Question

我使用了bootstrap折叠，现在我想通过单击javascript中的添加新横幅来动态添加折叠部分，这就是代码。

<button type="button" name="submit"  style="margin-left:250px;" class="btn 
btn-primary" onclick="bannerfunction();">Add Banner</button>   
  <div class="card" style="display:none;" id="welcomeDiv">
 <div class="card-header" id="headingTwo">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" type="button" data- 
 toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria- 
 controls="collapseTwo">
      Collapsible Group Item #2
    </button>
  </h5>
 </div>
 <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data- 
 parent="#accordionExample">
  <div class="card-body">
    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>
  </div>
  <script>
  function bannerfunction() {

  }
  </script>

在此处检查图像链接 enter image description here