工作中遇到的一种挺好的循环添加列表的方式,用模板,记录一下。
以前遇到要循环添加相同的元素用的都是字符串拼接的方式,后来工作中遇到了这种方式,发现这个比字符串拼接好用很多,简洁明了。
HTML 1 2 3 4 5 6 7 8 <div id ="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 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。