Js动态HTML字符串拼接法加载数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chenbetter1996/article/details/84672913

描述

有时候前端请求获取到了数据，比如是一个要显示的表格数据。
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(’)”