HTML5模板标签<template>使用教程

编程 · 2023-12-07 · 307 人浏览

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))
JavaScript HTML CSS
Theme Jasmine by Kent Liao