阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML template 标签

      template 标签的功能

      HTML内容模板(<template>)元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现,但随后可以(原文为 may be)在运行时使用JavaScript实例化。

      将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容,但这样做只是为了确保这些内容有效;但元素内容不会被渲染。

      属性

      <template> 标签支持 HTML 全局属性

      但, HTMLTemplateElement 有个属性: content , 这个属性是只读的DocumentFragment 包含了模板所表示的DOM树。

      示例

      首先我们从示例的HTML部分开始。

      <table id="producttable">
        <thead>
          <tr>
            <td>UPC_Code</td>
            <td>Product_Name</td>
          </tr>
        </thead>
        <tbody>
          <!-- 现有数据可以可选地包括在这里 -->
        </tbody>
      </table>
      
      <template id="productrow">
        <tr>
          <td class="record"></td>
          <td></td>
        </tr>
      </template> 
      

      首先,我们有一个表,稍后我们将使用JavaScript代码在其中插入内容。然后是模板,它描述了表示单个表行的HTML片段的结构。

      既然已经创建了表并定义了模板,我们使用JavaScript将行插入到表中,每一行都是以模板为基础构建的。

      // 通过检查来测试浏览器是否支持HTML模板元素 
      // 用于保存模板元素的内容属性。
      if ('content' in document.createElement('template')) {
      
        // 使用现有的HTML tbody实例化表和该行与模板
        let t = document.querySelector('#productrow'),
        td = t.content.querySelectorAll("td");
        td[0].textContent = "1235646565";
        td[1].textContent = "Stuff";
      
        // 克隆新行并将其插入表中
        let tb = document.getElementsByTagName("tbody");
        let clone = document.importNode(t.content, true);
        tb[0].appendChild(clone);
        
        // 创建一个新行
        td[0].textContent = "0384928528";
        td[1].textContent = "Acme Kidney Beans";
      
        // 克隆新行并将其插入表中
        let clone2 = document.importNode(t.content, true);
        tb[0].appendChild(clone2);
      
      } else {
        // 找到另一种方法来添加行到表,因为不支持HTML模板元素。
      }
      

      结果是原始的HTML表格,通过JavaScript添加了两行新内容:

      事件属性

      <template> 标签支持 HTML 事件属性

      目录
      目录