描述

有時候前端請求獲取到了資料，比如是一個要顯示的表格資料。
js動態載入顯示方法有兩種。
1. 動態建立元素，配置屬性，加入母元素標籤（編碼量多）
2. HTML字串拼接，替換為母元素innerHTML(高效)

方法

• 方法一可以參考 =>Js動態給表格節點tbody新增資料

• 方法二也就是字串拼接如下案例：

    var tdHtml = "";
    for (var i = 0; i != data.length; ++i) {
        // 那些'/t'是複製html程式碼過來自動生成的縮排，無關緊要。
        tdHtml +=
 
 '<tr class="baby_box">\n' +
            '\t\t\t\t\t\t<td>\n' +
            '\t\t\t\t\t\t\t<input type="checkbox" class="check_it">\n' +
            '\t\t\t\t\t\t\t<img src="'.concat(data[i].imgUrl1).concat('" class="baby_img">\n' +
                '\t\t\t\t\t\t\t<div class="baby_mess">\n'
 
 +
                '\t\t\t\t\t\t\t\t<span class="baby_desc">'.concat(data[i].title).concat('</span>\n' +
                    '\t\t\t\t\t\t\t\t<span class="baby_id">id:'.concat(data[i].introduction).concat('</span>\n' +
                        '\t\t\t\t\t\t\t</div>\n' +
                        '\t\t\t\t\t\t</td>\n'
 
 +
                        '\t\t\t\t\t\t<td class="red">'.concat(data[i].price).concat('</td>\n' +
                            '\t\t\t\t\t\t<td>'.concat(data[i].saleVolume).concat('</td>\n' +
                                '\t\t\t\t\t\t<td>'.concat(data[i].inventory).concat('</td>\n' +
                                    '\t\t\t\t\t\t<td>\n' +
                                    '\t\t\t\t\t\t\t<span>'.concat(data[i].type).concat('</span>\n' +
                                        '\t\t\t\t\t\t</td>\n' +
                                        '\t\t\t\t\t\t<td class="table_edit blue" onclick="deleteBook('.concat(data[i].id).concat(')">下架寶貝</td>\n' +
                                        '\t\t\t\t\t</tr>'))))))));

    }
    $(".tableBody")[0].innerHTML = tdHtml;

遍歷data列表，將資料生成為<tbody>下的每一個<td>
需要顯示資料的地方使用.concat()字串拼接函式。
最後迴圈結束自己修改<tbody>的innerHTML即可

注意點 & 程式設計習慣

1. JavaScript是解釋性語言，所有字串格式支援當雙引號共存。一般共存情況下外側使用單引號，內側使用雙引號。
2. 使用.concat()一般是連用兩個，一個連線引數，一個連線後面的字串。一般先在要連線的地方打入 **’’**一對單引號，然後中間插入 ‘.concat(資料).concat(’…後續字串，然後在最後處新增一個 ) 即可。
3. 因為資料是後渲染生成的, 資料有滯後性，所有使用點選函式的要注意，一般使用傳遞引數的方法，後續再編寫一個對應函式，一般不在字串中展開寫。如onclick=“deleteBook(’.concat(data[i].id).concat(’)”