HTML <template> 元素

HTML <template> 元素是一种用于保存客户端内容的机制，当内容被加载时，不会被渲染，但可以在运行时使用 JavaScript 进行实例化。

可以认为模板是存储了一些内容片段，用于后续在文档中使用。虽然在页面加载时，解析器会处理 <template> 元素的内容，但这只是确保这些内容有效，而元素的内容并不会被渲染。

特性

内容类别 元数据内容，流式内容，短语内容，脚本支持元素
允许的内容 无限制
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 <body>，<frameset>，<head>，<dl> 和没有 span 属性的 <colgroup> 元素
允许的 ARIA 角色 无
DOM 接口 HTMLTemplateElement

属性

该元素只包含全局属性。

更多实例

通过 JavaScript 代码，将 <template> 中的内容插入到表格中

<style>
  table {
    background: #000;
  }

  table td {
    background: #fff;
  }
</style>

<table id="producttable">
  <thead>
    <tr>
      <td>UPC 代码</td>
      <td>商品名称</td>
    </tr>
  </thead>
  <tbody>
    <!-- 已有数据可以填写在这里 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

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

尝试一下 »

截图

通过 JavaScript 代码，将 <template> 中的内容插入到表格中

规范

规范 状态 备注
HTML Living Standard
template element 的定义		 现行的标准 -
HTML5
template element 的定义		 推荐 初始定义

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 26 13 22 不支持 15 7.1

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 未知 未知 支持 22 不支持 未知 8

相关链接