意义: 根据一个数据(数组 / 对象), 把页面的 html 结构完成
1. 获取元素
=> tbody 标签: 因为最终组装完毕的内容需要填充到 tbody 标签内
2. 把 userList 数组转换成 html 格式的字符串
=> 需要多少个 tr ?
=> 数组的 length 是多少, 就是多少个 tr
=> 遍历 数组, 生成 tr
=> 每一个 tr 内需要多少个 td ?
=> 遍历 每一个 对象, 生成 td
=> 在 td 开合标签中间加上文本内容
3. 在循环遍历结束以后
=> 把 str 填充到 tbody 内部
// 0. 要准备好一个数据
let userList = [
{ id: 1, name: 'Jack', age: 18, gender: '男' },
{ id: 2, name: 'Rose', age: 20, gender: '女' },
{ id: 3, name: 'Tom', age: 22, gender: '男' },
{ id: 4, name: 'Jerry', age: 24, gender: '女' }
]
// 1. 获取元素
let tbody = document.querySelector('tbody')
// 2. 准备拼接字符串
let str = ''
userList.forEach(item => {
// 这个函数执行多少回, 需要多少个 tr 标签
str += `
<tr>
<td>
<span>${ item.id }</span>
</td>
<td>
<i>${ item.name }</i>
</td>
<td>
${ item.age }
</td>
<td>
<h4>${ item.gender }</h4>
</td>
</tr>
`
})
// 3. 填充内容
tbody.innerHTML = str