JavaScript：たくさんのHTMLをどのように生成すればよいですか？

Question

可能性の重複：
Is there a best practice for generating html with javascript

私はJavaScriptを使用して、ウェブサイトの大部分を生成したいです。

簡単な方法は、すべてのHTMLを含む一つの大きな文字列を形成することである。

'<div>' 
    + '<span>some text</span>' 
    + '<form>' 
     + '<input type="text" />' 
... 

をしかし、一つはこのスタイルでは、数百行を記述しなければならないとき、これは非常に迷惑を取得します。そのようなコードを後で変更しなければならないときの痛み...

もっと簡単な方法はありますか？

Answer 1

見えない<div>に入れて、テンプレートとしてスニペットを作成します。

<div style="display: none"> 
    <div id="template1"> 
     <h2 class="header_identifyingClass">Hello from template</h2> 
    </div> 
    <div id="template2"> 
     <span class="content">Blah blah</span> 
    </div> 
</div> 

その後、

document.getElementById("template1"); 

をそれを見つける例えば、それは内部値の塗りつぶしXPathまたはjQueryで要素内を検索し、要素を入力します。 element.innerHTML = "Hello from new value"を使用して、DOMの可視部分に移動またはコピーします。

複数のテンプレートを作成し、複数回コピーして多数を生成します。 コピーのIDを変更して、機能し続けるようにしてください。

PS：このアプローチをJUnitDiffプロジェクトのコードで使用したと思います。しかし、もう一つの目的を果たすXSLTに埋め込まれています。

Answer 2

CoffeeScriptなどのJavaScriptの方言を使用します。これは、ヒアドキュメントを持っています

''' 
    <div> 
    <span>some text</span> 
    <form> 
     <input type="text" /> 
''' 

あなたは時折式でスローする必要がある場合は、補間を使用することができます。

""" 
    <title>#{title}</title> 
""" 

Answer 3

それはあなただけのJavaScriptのイベントをページに追加している静的なコンテンツならあなたはメインのHTMLページに単純に入れてみることもできますが、スタイルはdisplay:none;となります。

次に、ページに表示するスタイルを変更する場合です。ずっと簡単。

動的であっても、このテクニックを使用することができます。ページ内にシェルHTMLコンテンツを隠しておき、表示する前に動的ビットを埋め込みます。

希望するものがあります。

Answer 4

これを行うための最良の方法は、JavaScriptのテンプレートシステムを使用することです。これがCSSでHTMLを隠すよりも優れている理由は、（たとえば）誰かがCSSを無効にすると、明らかに理想的ではないテンプレートを見ることができるからです。

テンプレートシステムを使用すると、テンプレートを<script>タグに入れることができます。つまり、JavaScript以外のものは完全に隠されています。

私のお気に入りは、jQueryが最近普及していることが主な理由です。あなたはここからそれを得ることができます：http://api.jquery.com/category/plugins/templates/

（jQueryのドキュメントから取られた）例：

<ul id="movieList"></ul> 

<!-- the template is in this script tag -->  
<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    <li><b>${Name}</b> (${ReleaseYear})</li> 
</script> 

<!-- this script will fill out the template with the values you assign -->  
<script type="text/javascript"> 
    var movies = [ 
     { Name: "The Red Violin", ReleaseYear: "1998" }, 
     { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
     { Name: "The Inheritance", ReleaseYear: "1976" } 
    ]; 

    // Render the template with the movies data and insert 
    // the rendered HTML under the "movieList" element 
    $("#movieTemplate").tmpl(movies) 
     .appendTo("#movieList"); 
</script> 

それは単純な例ですが、あなたはあなたが生成したいHTMLのすべてを置くことができ<script>、はるかに柔軟性があります（さまざまなジョブに同じHTMLスニペットを使用し、ギャップを埋めるだけです）。また、多くのテンプレートを使用してより大きなHTMLスニペットを構築することもできます。