在jQuery / Javascript中生成復雜的HTML元素

Question

我有一個場景，我從JSON接收數據，並且該數據應以復雜的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>

聲明所有內容后，我將在jQuery中使用它使用HTML中預定義的元素動態創建表。 如下所示。

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

您可以使用模板庫，例如mustache（ https://mustache.github.io/ ）或handlebars（ http://handlebarsjs.com/ ）。 它們易於維護且易於使用。