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

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

Content categories Metadata content, flow content, phrasing content, script-supporting element
Permitted content No restrictions
Tag omission 不允许,开始标签和结束标签都不能省略。
Permitted parents <body>, <frameset>, <head>, <dl> and <colgroup> without a span attribute
Permitted ARIA roles None
DOM interface HTMLTemplateElement

属性

此元素仅包含全局属性

示例

首先我们从示例的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添加了两行新内容:

标准

Specification Status Comment
HTML Living Standard
template element
Living Standard  
HTML5
template element
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
templateChrome Full support 26Edge Full support 13Firefox Full support 22IE No support NoOpera Full support 15Safari Full support 8WebView Android Full support YesChrome Android Full support 26Edge Mobile Full support YesFirefox Android Full support 22Opera Android ? Safari iOS Full support 8Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

参见

 

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, zhangchen, xgqfrms-GitHub, Breezewish
最后编辑者: mdnwebdocs-bot,