Javascript 如何使用createDocumentFragment创建这些元素？

我必须根据api中json的长度将这些元素添加几次。但我是createDocumentFragment的新手，所以我不知道该怎么办。下面的HTML代码是我必须多次附加的，还有示例js代码

<div class="column is-3 vid">
  <div class="panel">
    <p class="is-marginless"><img src="imgSrc"/></p>
    <div class="panel vidInfo"><a href="#" class="vid-title"><span>text</span></a>
      <div class="columns has-text-centered">
        <div class="column">
          <div class="panel-item reddit-ups"><i class="fa fa-reddit-alien fa-2x"></i>2 </div>
          <div class="panel-item reddit-date"><i class="fa fa-calendar fa-2x"></i>2d </div>
        </div>
      </div>
    </div>
  </div>
</div>

2.
二维

js代码

var fragment = document.createDocumentFragment();

 for(var i=0; i<20; i++){
     //append elements like html code above in body.    
 }

var fragment=document.createDocumentFragment（）；
对于（var i=0；i您可以将现有的
html
放在
文档
的
元素中，将
类型
设置为
文本/html
，然后调用元素的get
。innerHTML
，在
之前使用
.insertAdjacentHTML（）
作为将
html
字符串附加到
document.body
的第一个参数




2.
二维
var template=document.getElementById（“模板”）；
var html=template.innerHTML；
对于（变量i=0；i<20；i++）{
//将类似html代码的元素附加到正文中。
document.body.insertAdjacentHTML（“beforeed”，html）；
}