動的HTMLで要素を設定する

Question

関数呼び出しでその内容を自動的に更新するソングキューを構築しています。この関数呼び出しは、キュー内の曲（画像URL、曲名、曲作者）のjsonデータを返すajaxリクエストをPHPスクリプトに作成します。私はその後、jsonデータに返されたこれらの曲のそれぞれに基づいて、ulに動的にulを設定したいと考えています。

現在の構造は、他のすべてのhtmlを保持するliを含むulです。

ので、同じように：

var ul = document.getElementById('ul'); 

ul.appendChild(child); 

これで私の問題は、私がしようとしているということです。

<ul> 
    <li> 
     <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div> 
     <div id="songdetails"> 
      <div id="title">TITLE HERE</div> 
      <div id="author">AUTHOR HERE</div> 
     </div> 
    </li> 

    <li> 
     <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div> 
     <div id="songdetails"> 
      <div id="title">TITLE HERE</div> 
      <div id="author">AUTHOR HERE</div> 
     </div> 
    </li> 

    <li> 
     <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div> 
     <div id="songdetails"> 
      <div id="title">TITLE HERE</div> 
      <div id="author">AUTHOR HERE</div> 
     </div> 
    </li> 
</ul> 

私の問題は、私はstackoverflowの他のサイトで見つけたものから、ほとんどの人が何かを示唆していることですコードを合理化して読みやすくするために使用しているコードの量を最小限に抑え、各子とその子に変数を持たせる必要はありません。

これを達成するより効率的な方法はありますか？

Answer 1

jQueryのソリューション：

<ul id="container" /> 

とJavascript：

// Assuming the data comes in like this: 
/* 
[ 
    {url: 'http://www.example/com', title: 'Title Goes Here', author: 'Author here'}, 
    {url: ... 
] 
*/ 
$.getJSON('url.php', function(data) { 
    $('#container').empty().append(data.map(function(x) { 
     return ' 
      <li> 
       <div id="thumbnail" style="background: url(\'' + x.url + '\'); background-size: 100% 100%"></div> 
       <div id="songdetails"> 
        <div id="title">' + x.title + '</div> 
        <div id="author">' + x.author + '</div> 
       </div> 
      </li> 
     '); 
    }); 
}); 

Answer 2

私はテンプレートでこれを行う傾向があります。私はこの

function renderTemplate(str, obj) { 
     var i, r, val, outStr=str; 

     for(i in obj) { 
      if (obj.hasOwnProperty(i)) { 
       r = new RegExp("{" + i + "}", "g"); 
       val = obj[i] || " "; 
       val = val.toString().replace(/^null$/, " "); 
       outStr = outStr.replace(r, val); 
      } 
     } 

     return outStr; 
    } 

などの基本的な文字列の置換は、その後、私は名前と年齢を含むオブジェクトを考えると、この

var template = "Hello <span class=\"name\">{name}</span> you are {age} years old"; 

のようなテンプレート文字列を作成しますし、簡単なテンプレートエンジンを作成し、あなたがレンダリングすることができます二番目の引数に渡されたオブジェクト内のキーは（「{」および「}」）中括弧に包まれたテンプレートで検索され、この

var html=renderTemplate(template, {name: "Alice", age: 38}); 

ようにHTMLにテンプレート

最後に、私は新しい要素を作成し、innerHTMLプロパティには、この文字列を設定し、私の文書に付加

var newLI = document.createElement("li"); 
newLI.innerHTML = html; 
ulNode.appendChild(newLI); 

このrenderTemplateは私の初期の創造物であると私はより多くをされているコードに埋め込まれた部分の新しいバージョンを持っていますフォールトトレラントですが、これは良い例です。

注：野生には他のテンプレートソリューションがあります。これは私の自家製のものです。 OPのコメントによると、口ひげはそのようなものです。