createDocumentFragmentを使用してこれらの要素を作成する方法は？

これらの要素をapiからjsonの長さで追加する必要があります。しかし私はcreateDocumentFragmentを新しくして何をすべきか分からない。以下のHTMLコードは、私が複数回追加しなければならないもので、例jsコードです。createDocumentFragmentを使用してこれらの要素を作成する方法は？

<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>

jsのコード

var fragment = document.createDocumentFragment(); 

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

出典

2017-02-20 boombamboo

あなたは、その要素の.innerHTMLを取得呼び出し、text/htmlにtypeセットで、documentで<script>要素内の既存のhtmlを置くとして、第1 "beforeend"と.insertAdjacentHTML()を使用することができますパラメータhtmlをdocument.bodyに追加します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script id="template" type="text/html"> 
 
    <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> 
 
    </script> 
 
</head> 
 
<body> 
 
    <script> 
 
    var template = document.getElementById("template"); 
 
    var html = template.innerHTML; 
 
    for (var i = 0; i < 20; i++) { 
 
    //append elements like html code above in body. 
 
    document.body.insertAdjacentHTML("beforeend", html); 
 
    } 
 
</script> 
 
</body> 
 
</html>

出典

2017-02-20 04:44:23 guest271314

createDocumentFragmentを使用してこれらの要素を作成する方法は？

答えて

関連する問題