<!doctype html>
<html lang="en">
<head>
??<meta charset="UTF-8">
??<title>jQuery渲染数据练习</title>
</head>
<body>
??<ul class="itemBox" id="itemBox">
?????<!-- 初始模版 -->
?????<!-- <li class="item">
????????<h3>姓名：</h3>
????????<h4>性别</h4>
????????<h4>城市：</h4>
????????<h4>年龄：</h4>
?????</li> -->
??</ul> ?
??<script type="text/javascript" src="jquery.min.js"></script>
??<script type="text/javascript">
?????
?????// 这是模拟的数据
?????var data = [
????????{name: ‘小明‘, age: 12, sex: ‘男‘, city: ‘西安‘},
????????{name: ‘小王‘, age: 34, sex: ‘女‘, city: ‘榆林‘},
????????{name: ‘小张‘, age: 45, sex: ‘男‘, city: ‘宝鸡‘},
????????{name: ‘小李‘, age: 17, sex: ‘女‘, city: ‘咸阳‘},
????????{name: ‘小赵‘, age: 11, sex: ‘女‘, city: ‘山西‘},
????????{name: ‘小孙‘, age: 2, sex: ‘男‘, city: ‘湖南‘},
?????];
?????// 这是模拟的处理数据的函数
?????function success(data) {
????????// 对数据进行判断，若数据存在
????????if(data) {
???????????// 遍历数据
???????????data.forEach(function (v) { ?// 这里可以换为箭头函数，注意兼容性
?????????????console.log(v)
??????????????// 创建元素的模版并拼接数据
??????????????// es5的写法，帮你注释了
??????????????// var str = ‘<li class="item"><h3>姓名：‘+ v.name +‘</h3><h4>性别：‘+ v.sex +‘</h4><h4>城市：‘+ v.city +‘</h4><h4>年龄：‘ + v.age + ‘</h4></li>‘;
??????????????// es6的写法
??????????????var str = `<li class="item">
??????????????????????????<h3>姓名：${v.name}</h3>
??????????????????????????<h4>性别：${v.sex}</h4>
??????????????????????????<h4>城市：${v.city}</h4>
??????????????????????????<h4>年龄：${v.age}</h4>
???????????????????????</li>`;
??????????????// 创建元素
???????????????var oLi = $(str);
??????????????// // 可以在这绑定事件，添加样式等操作，也可以事件委托交给父元素（推荐）
??????????????oLi.on(‘click‘, () => {
?????????????????alert(‘你点击了元素‘);
??????????????});
??????????????// 添加到页面
????????????????????$(‘#itemBox‘).append(oLi)
???????????????//或者这样一次到位，不用创建中间变量
??????????????// $(‘#itemBox‘).append(`<h3>${v.name}</h3>`);
???????????});
????????} else {
???????????alert(‘数据加载失败‘);
????????}
?????}
?????// 模拟调用过程
?????success(data);
??</script>
</body>
</html>
模拟ajax中success函数获取数据，并且渲染
原文地址：https://www.cnblogs.com/rxfn/p/9531140.html