JavaScriptを使ってdivに動的に複雑なHTMLを追加する

Question

多くの要素（特定のムービー）を一覧表示するWebページがあり、あらゆる項目のHTML構造が何らかの形で大きく複雑になっています（div、画像、リンク、CSSクラス、など）。

最初に、100要素を読み込み、次の100を読み込むオプションがあります（これは無限スクロールを使用して行われます）。これまでに、100要素を要求するAJAX請願を作成し、HTMLテキストそれらのすべてがロードされている）、ドキュメントに追加するだけです。

しかし、私はJSONの100要素のデータ（私はそれを行うことができます）で応答したいのではなく、HTMLテキストで応答したくないのですが、私の質問は次のとおりです。 Javascriptを使用してこれらの要素を文書に追加する最も良い方法は？

私はJSON配列をループしてすべての要素を構築できることを知っていますが、私が言ったように、それは大きなHTML構造であり、divを作成して別のdiv 、など、Javascriptを使用すると、混乱し、乱雑で非常に大きなものになる可能性があるので... javascriptで、テンプレートのようなものを使用する方法がありますか？どうやってやるの？私はちょうどきれいで良いコードを手に入れたいと思う。

すべての映画の構造は、（私はテンプレートのようにそれを使用することができますか？）このようなものです：

<div data-section="movies" data-movie_id="myid" id="movie-id" class="movie anotherclass"> 
     <img src="myImageUrl"> 
     <div class="aCSSclass"> 
      <div class="aCSSclass"> 
       <div class="aCSSclass"></div> 
       <div class="aCSSclass"> 
        <div class="aCSSclass"> 
         Movie title 
        </div> 

        <div class="details form-group"> 
         <a class="aCSSclass" href="myHref">Details</a> 
         <button onclick="SomeFunction" class="aCSSclass">My button</button> 
         <div class="aCSSclass"><span class="icon star"></span><span class="aCSSclass"></span><span class="aCSSclass"></span><span class="aCSSclass"></span><span class="aCSSclass"></span></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

答えは、テンプレートを作成し、その後、cloneNode()を使用してノードをコピーすることです。クローンしたすべてのノードをdocumentFragmentに追加すると、描画にかかる時間が節約され、最終的にページに追加されます。これに

アプローチ：

var movies = {"movie1" : { "title" : "Die Hard", "imageurl" : "example.com/image.jpg", "details" : "http://example.com", "func" : "functionname" }, 
 
      "movie2" : { "title" : "Die Hard 2", "imageurl" : "example.com/image.jpg", "details" : "http://example.com", "func" : "functionname" }, 
 
      "movie3" : { "title" : "Die Hard With 3", "imageurl" : "example.com/image.jpg", "details" : "http://example.com", "func" : "functionname" } 
 
      }; 
 

 
function functionname() 
 
{ 
 
    alert("NYI"); 
 
} 
 

 
var keys = Object.keys(movies); //get the keys. 
 
var docFrag = document.createDocumentFragment(); 
 
for (var i = 0; i < keys.length; i++) 
 
{ 
 
    var tempNode = document.querySelector("div[data-type='template']").cloneNode(true); //true for deep clone 
 
    tempNode.querySelector("div.title").textContent = movies[keys[i]].title; 
 
    tempNode.querySelector("img").src = movies[keys[i]].imageurl; 
 
    tempNode.querySelector("button").onclick = window[movies[keys[i]].func]; 
 
    tempNode.querySelector("a").href = movies[keys[i]].details; 
 
    tempNode.style.display = "block"; 
 
    document.body.appendChild(tempNode); 
 

 
} 
 
document.body.appendChild(docFrag); 
 
delete docFrag;

<!-- template --> 
 
<div style="display: none" data-type="template" data-section="movies" data-movie_id="myid" id="movie-id" class="movie anotherclass"> 
 
     <img src="myImageUrl"> 
 
     <div class="aCSSclass"> 
 
      <div class="aCSSclass"> 
 
       <div class="aCSSclass"></div> 
 
       <div class="aCSSclass"> 
 
        <div class="aCSSclass title"> 
 
         Movie title 
 
        </div> 
 

 
        <div class="details form-group"> 
 
         <a class="aCSSclass" href="myHref">Details</a> 
 
         <button onclick="SomeFunction" class="aCSSclass">My button</button> 
 
         <div class="aCSSclass"><span class="icon star"></span><span class="aCSSclass"></span><span class="aCSSclass"></span><span class="aCSSclass"></span><span class="aCSSclass"></span></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

これは一例であり、実際のJSONに基づいていません。ただし、テンプレートを簡単に複製して値を入力することは簡単です。

使用

• document.querySelector
• document.querySelectorAll
• document.createDocumentFragment
• Element.cloneNode（BOOL）[文書フラグメント]へ