如何使用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

您可以將現有的html一個<script>件內document，與type設置爲text/html，然後調用get元素.innerHTML，如先用.insertAdjacentHTML()與"beforeend"參數將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創建這些元素？

回答

相關問題