Wie können diese Elemente mit createDocumentFragment erstellt werden?

Ich muss diese Elemente mal an die Länge von json von api anhängen. aber ich bin neu bei createDocumentFragment, also bin ich mir nicht sicher, was ich tun soll. HTML-Code unten ist, was ich mehrmals anhängen muss, und Beispiel-Js-Code.Wie können diese Elemente mit createDocumentFragment erstellt werden?

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

var fragment = document.createDocumentFragment(); 

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

Quelle

2017-02-20 boombamboo

können Sie platzieren die bestehende html innerhalb eines <script> Element bei document, mit type Set text/html, rufen Sie dann .innerHTML von Element erhalten, verwenden .insertAdjacentHTML() mit "beforeend" als erste Parameter zum Anhängen der html Zeichenfolge an 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>

Quelle

2017-02-20 04:44:23 guest271314

Wie können diese Elemente mit createDocumentFragment erstellt werden?

Antwort

Verwandte Themen