jQuery/Javascriptで複雑なHTML要素を生成する

Question

私はJSONからデータを受け取るシナリオを持っています。そのデータは、Webページ全体、複雑なHTML構造（リストを含むテーブルなど）で動的に表示する必要があります。

JSONデータが受信されるたびに、HTML要素を動的に再生成します。たとえば、HTMLテーブルの行数は、JSONのデータによって異なります。

HTML構造が複雑で、いくつかのCSSが関連付けられている必要があります。これを行う最良の方法は何ですか？

私の考えは、HTMLファイル内の単一の要素を「宣言」し、それらをすべてJavascript（jQuery）の複雑な構造にまとめることでした。私は、各セル内のリストを持っているテーブルを生成する必要があり、すべてのリストが動的に作成およびJavaScriptでの要素で満たされている場合たとえば、私は、次のように宣言し

：

HTML宣言

<!-- Define table --> 
    <script type="text" id="my_table">    
     <table class="a-bordered a-align-center a-spacing-base a-size-base"></table> 
    </script> 

    <!-- Define table heading element: each column has it's own heading --> 
    <script type="text" id="my_table_heading"> 
     <th class="a-color-base a-size-base a-text-center"></th> 
    </script> 

    <!-- Define table row --> 
    <script type="text" id="my_table_row"> 
     <tr class="a-spacing-base a-spacing-top-base a-text-center"></tr> 
    </script> 

    <!-- Define list --> 
    <script type="text" id="my_list"> 
     <ol class="a-ordered-list a-vertical a-spacing-base"></ol> 
    </script> 

    <!-- Define list item --> 
    <script type="text" id="my_list_item">    
     <li class="a-list-normal a-spacing-none a-spacing-top-mini"><span class="a-list-item a-color-link"></li> 
    </script> 

でファイルスニペット私は宣言したものをすべて持っているとき、私は動的にHTMLに事前定義の要素と私のテーブルを作成するために、jQueryのでそれを使用します。次..

のJavascriptファイルスニペット

// get the predefined table heading 
var table_heading = $($("#my_table_heading").html()); 

// append it to the table :: do that in a for loop for all headings 
$("#my_table").append(table_heading); 

// get the predefined list from HTML 
var list = $($("#my_list").html()); 

// append it to the cell 
$("#my_cell").append(list); 

私の質問のようなものは正しいアプローチということでしょうか？私はJavascript/jQuery/HTMLを初めて使用しています。そのため、複雑なhtml構造を生成する方法を知りたいのですが？

1. これは問題ありませんか？
2. より良いフレームワークはありますか？

Answer 1

ひげそり（https://mustache.github.io/）やハンドルバー（http://handlebarsjs.com/）などのテンプレートライブラリを使用できます。それらは維持可能で使い易い。