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

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

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。