动态渲染页面：在我们的代码里面有已知的数据结构，我们通过代码的方式把这个数据渲染成一个页面再显示在表格上（当然不一定要渲染表格，也可以根据需求渲染成各种各样的结构）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 300px;
text-align: center;
border: 1px solid #000;
border-collapse: collapse;
margin: 30px auto;
}
table tr {
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!-- 渲染页面 -->
</tbody>
</table>
<script>
// 提前准备好数据
var users = [{
id: 1,
name: '小明',
age: 18
}, {
id: 2,
name: '大白',
age: 20
}, {
id: 3,
name: '章鱼',
age: 22
}]
//获取body标签
var tbody = document.querySelector('tbody')
//1.先循环遍历users
users.forEach(function(item, index) {
//item就是users里面的每一个数据
console.log(item);
//2.每循环一次就要生成tr标签
var tr = document.createElement('tr')
//3.遍历循环item 就是遍历每一个对象
for (var key in item) {
//4.生成td标签
var td = document.createElement('td')
//5.然后把内容添加到td内
td.innerHTML = item[key]
//6.把td再插入到tr标签内
tr.appendChild(td)
}
//7.等循环结束再把tr插入到tbody内
tbody.appendChild(tr)
})
</script>
</body>
</html>结果：