jquery 编写html模板

场景介绍

需要将后台返回的ajax数据遍历填充到li中，然后插入到ul当中

案例

后台返回数据

{
	data:[{
		name:zhangsan,
		age:12,
		sex:男
	}，
	{
		name:lisi,
		age:14,
		sex:女
	}
	]
	success:true
}

由于只有jq没有第三方插件所以暂时想到两种解决方案

• 一

简单粗暴，遍历数据，然后添加到对应的ul后面

伪代码

for (var i = 0; i < data.length; i++) {
          //拼接li
          var str = "<li>"+data[i].name+":"+data[i].age+"</li>";
          //追加到ul中
          $("ul").append(str);
}

• 二

使用模板

准备好要使用的li模板

<ul id="list">
	<li id="template"><span id="name"></span><span id="age"></span><li>
</ul>

遍历封装数据

$.each(data, function (i, n) {
            var row = $("#template").clone();   
            row.find("#name").text(n.name);
            row.find("#age").text(n.age);
            row.appendTo("list");
 })

个人更加推荐第二种，代码风格不臃肿，思路直观清晰
前端小白 如果有不正确的地方 欢迎指出～