HTML5模板标签template使用教程

66次阅读
没有评论

共计 2112 个字符,预计需要花费 6 分钟才能阅读完成。

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))

正文完
 0
三毛笔记
版权声明:本站原创文章,由 三毛笔记 于2023-12-07发表,共计2112字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)