template标签
是HTML5中引入的一种新标签，用于定义可复制的模板。它允许在文档中定义一段包含HTML结构的模板，但不会在页面加载时显示其内容，加载后通过使用JavaScript来显示它。
实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.title {
margin-bottom: 10px;
font-size: 30px;
color: #333;
text-align: center;
}
.row {
background-color: #fff;
display: flex;
justify-content: center;
}
.col {
border: 1px solid #f0f0f0;
width: 15%;
height: 35px;
text-align: center;
line-height: 35px;
}
.bold .col {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div>
<div class="title">学生列表</div>
<div class="thead">
<div class="row bold">
<div class="col">编号</div>
<div class="col">姓名</div>
<div class="col">列表</div>
</div>
</div>
<div class="tbody"></div>
</div>
<template id="tp">
<div class="row">
<div class="col">xxx</div>
<div class="col">xxx</div>
<div class="col">xxx</div>
</div>
</template>
<script>
let arr = [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 19 },
{ id: 3, name: '王五', age: 20 },
]
const tp = document.getElementById('tp')
const row = tp.content
const [c1, c2, c3] = row.querySelectorAll('.col')
const tbody = document.querySelector('.tbody')
for (const { id, name, age } of arr) {
c1.textContent = id
c2.textContent = name
c3.textContent = age
const newNode = document.importNode(row, true)
tbody.appendChild(newNode)
}
</script>
</body>
</html>同步写法
新建students.json文件：
[
{ "id": 1, "name": "张三", "age": 18 },
{ "id": 2, "name": "李四", "age": 19 },
{ "id": 3, "name": "王五", "age": 20 }
]相应的JS代码修改为：
async function getStudents() {
try {
// 获取响应对象，返回 Promise
const res = await fetch('students.json')
// 获取响应体
const arr = await res.json()
const tp = document.getElementById('tp')
const row = tp.content
const [c1, c2, c3] = row.querySelectorAll('.col')
const tbody = document.querySelector('.tbody')
for (const { id, name, age } of arr) {
c1.textContent = id
c2.textContent = name
c3.textContent = age
const newNode = document.importNode(row, true)
tbody.appendChild(newNode)
}
} catch (e) {
console.log(e)
}
}
getStudents()异步写法
相应的JS代码修改为：
fetch('students.json')
.then((res) => res.json())
.then((arr) => {
const tp = document.getElementById('tp')
const row = tp.content
const [c1, c2, c3] = row.querySelectorAll('.col')
const tbody = document.querySelector('.tbody')
for (const { id, name, age } of arr) {
c1.textContent = id
c2.textContent = name
c3.textContent = age
const newNode = document.importNode(row, true)
tbody.appendChild(newNode)
}
})
.catch((e) => console.log(e))
