mozilla

Revision 495389 of <template>

  • Revision slug: Web/HTML/Element/template
  • Revision title: <template>
  • Revision id: 495389
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML template element <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document. The parser does process the content of the <template> element during the page load to ensure that it is valid, however.

  • Content categories Metadata content.
  • Permitted content Any valid HTML content that is permitted to occur within the {{HTMLElement("body")}}, {{HTMLElement("frameset")}}, and {{HTMLElement("head")}} elements.
  • Tag omission {{no_tag_omission}}
  • Permitted parent elements {{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}}.
  • DOM interface {{domxref("HTMLTemplateElement")}}

Attributes

This element includes the global attributes.

There is also a content attribute, which is read-only. It provides access to the contents of the template. The existence of the content attribute is often used as a way of determining if a particular browser supports the <template> element.

Examples

First we start with the HTML portion of the example.

<table id="producttable">
 <thead>
  <tr>
   <td>UPC_Code</td>
   <td>Product_Name</td>
   <td>Quantity</td>
   <td>Aisle</td>
  </tr>
 </thead>
 <tbody>
  <!-- existing data could optionally be included here -->
 </tbody>
</table>

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

Then we see the JavaScript portion of the example, which can be used to instantiate the HTML.

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
  // Instantiate the table with the existing HTML tbody and the row with the template
  var tbl = document.querySelector("#producttable tbody"),
      prd = document.getElementById("productrow");
  // Create a new row
  var td = prd.getElementsByTagName("td");
  td[0].textContent = "0384928527";
  td[1].textContent = "Acme Green Beans";
  td[2].textContent = "42";
  td[3].textContent = "11B";
  // Clone the new row and insert it into the table
  tbl.appendChild(prd.content.cloneNode(true));
  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";
  td[2].textContent = "31";
  td[3].textContent = "11B";
  // Clone the new row and insert it into the table
  tbl.appendChild(prd.content.cloneNode(true));
} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}

The result is the original HTML table, with two new rows appended to it via JavaScript.

Specifications

Currently part of a draft specification, HTML Templates.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

  • Web components: {{HTMLElement("content")}}, {{HTMLElement("decorator")}}, {{HTMLElement("element")}}, {{HTMLElement("shadow")}}
{{HTMLRef}}

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>The <strong><a href="/en-US/docs/Web/HTML">HTML</a> template element <code>&lt;template&gt;</code></strong> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document. The parser does process the content of the <strong><code>&lt;template&gt;</code> </strong>element during the page load to ensure that it is valid, however.</p>
<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>.</li>
 <li><dfn>Permitted content</dfn> Any valid HTML content that is permitted to occur within the {{HTMLElement("body")}}, {{HTMLElement("frameset")}}, and {{HTMLElement("head")}} elements.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn> {{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}}.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLTemplateElement")}}</li>
</ul>
<h2 id="Attributes" name="Attributes">Attributes</h2>
<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
<p>There is also a <code>content</code> attribute, which is read-only. It provides access to the contents of the template. The existence of the <code>content</code> attribute is often used as a way of determining if a particular browser supports the <strong><code>&lt;template&gt;</code> </strong>element.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<p>First we start with the HTML portion of the example.</p>
<pre class="brush: html">
&lt;table id="producttable"&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;td&gt;UPC_Code&lt;/td&gt;
   &lt;td&gt;Product_Name&lt;/td&gt;
   &lt;td&gt;Quantity&lt;/td&gt;
   &lt;td&gt;Aisle&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
  &lt;!-- existing data could optionally be included here --&gt;
 &lt;/tbody&gt;
&lt;/table&gt;

&lt;template id="productrow"&gt;
  &lt;tr&gt;
  &lt;td class="record"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
&lt;/template&gt; 
</pre>
<p>Then we see the JavaScript portion of the example, which can be used to instantiate the HTML.</p>
<pre class="brush:js;">
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
  // Instantiate the table with the existing HTML tbody and the row with the template
  var tbl = document.querySelector("#producttable tbody"),
      prd = document.getElementById("productrow");
  // Create a new row
  var td = prd.getElementsByTagName("td");
  td[0].textContent = "0384928527";
  td[1].textContent = "Acme Green Beans";
  td[2].textContent = "42";
  td[3].textContent = "11B";
  // Clone the new row and insert it into the table
  tbl.appendChild(prd.content.cloneNode(true));
  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";
  td[2].textContent = "31";
  td[3].textContent = "11B";
  // Clone the new row and insert it into the table
  tbl.appendChild(prd.content.cloneNode(true));
} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}
</pre>
<p>The result is the original HTML table, with two new rows appended to it via JavaScript.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<p>Currently part of a draft specification, <a href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html#template-element">HTML Templates</a>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("decorator")}}, {{HTMLElement("element")}}, {{HTMLElement("shadow")}}</li>
</ul>
<div>
 {{HTMLRef}}</div>
Revert to this revision