工作中遇到的一种挺好的循环添加列表的方式，用模板，记录一下。

以前遇到要循环添加相同的元素用的都是字符串拼接的方式，后来工作中遇到了这种方式，发现这个比字符串拼接好用很多，简洁明了。

HTML

1
2
3
4
5
6
7
8
<!--目标div-->
<div id="div">
</div>
<!--模板div,模板所在div不会被复制-->
<div id="test" style="display: none;">
    <h1>hello,my name is TITLE</h1>
    <p>I'm CONTENT years old!</p>
</div>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//模拟后端传过来的json数据
var data = {
    datali: [{
        name: "chkl1",
        age: "sad1"
    }, {
        name: "chkl2",
        age: "sad2"
    }, {
        name: "chkl3",
        age: "sad3"
    }, {
        name: "chkl4",
        age: "sad4"
    }, {
        name: "chkl5",
        age: "sad5"
    }]
}
var lilength = data.datali.length;
var arr = data.datali;
for (var i = 0; i < arr.length; i++) {
    <!--获取模板div中的html-->
    var tihuan = document.getElementById("test").innerHTML;
    <!--用replace替换模板中要替换的部分，替换顺序最好是先替换长的再替换短的-->
    tihuan = tihuan.replace(/TITLE/, arr[i].name)
        .replace(/CONTENT/, arr[i].age);
    <!--创建一个div将修改完成后的代码放进去，再将这个div添加到目标位置-->
    div = document.createElement("div");
    div.innerHTML = tihuan;
    document.getElementById("div").appendChild(div);
}

注：模板中只能用class不能使用id。