Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Revision 589527 of <template>

  • Revision slug: Web/HTML/Element/template
  • Revision title: <template>
  • Revision id: 589527
  • Created:
  • Creator: Jeremie
  • 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, flow content, phrasing content, script-supporting element
  • Permitted content Metadata content, flow content, any valid HTML content that is permitted to occur within the {{HTMLElement("ol")}}, {{HTMLElement("dl")}}, {{HTMLElement("figure")}}, {{HTMLElement("ruby")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}, {{HTMLElement("audio")}}, {{HTMLElement("table")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("select")}}, {{HTMLElement("details")}} elements and {{HTMLElement("menu")}} whose type attribute is in popup menu state.
  • Tag omission {{no_tag_omission}}
  • Permitted parent elements{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}} and {{HTMLElement("colgroup")}} without a span attribute
  • 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>
  </tr>
 </thead>
 <tbody>
  <!-- existing data could optionally be included here -->
 </tbody>
</table>

<template id="productrow">
  <tr>
  <td class="record"></td>
  <td></td>
  </tr>
</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 t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone the new row and insert it into the table
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone the new row and insert it into the table
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} 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

Specification Status Comment
{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}} {{Spec2('HTML WHATWG')}} No change
{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}} {{Spec2('HTML5 W3C')}} Initial definition

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatNo}} {{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>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</li>
 <li><dfn>Permitted content</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content, </a>any valid HTML content that is permitted to occur within the {{HTMLElement("ol")}}, {{HTMLElement("dl")}}, {{HTMLElement("figure")}}, {{HTMLElement("ruby")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}, {{HTMLElement("audio")}}, {{HTMLElement("table")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("select")}}, {{HTMLElement("details")}} elements and {{HTMLElement("menu")}} whose <code>type</code> attribute is in popup menu state.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}} and {{HTMLElement("colgroup")}} without a <code>span</code> attribute</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;/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;/tr&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 t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone the new row and insert it into the table
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone the new row and insert it into the table
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} 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>
<table class="spectable standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>
<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>{{CompatNo}}</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