The <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. While the parser does process the contents of the <template>element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

Content categories Metadata content, flow content, phrasing content, script-supporting element
Permitted content No restrictions
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents <body>, <frameset>, <head>, <dl> and <colgroup> without a span attribute
Permitted ARIA roles None
DOM interface HTMLTemplateElement


This element only includes the global attributes.


First we start with the HTML portion of the example.

<table id="producttable">
    <!-- existing data could optionally be included here -->

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

First, we have a table into which we will later insert content using JavaScript code. Then comes the template, which describes the structure of an HTML fragment representing a single table row.

Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis.

// 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');

    // Clone the new row and insert it into the table
    var tb = document.querySelector("tbody");
    var clone = document.importNode(t.content, true);
    td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";


    // Clone the new row and insert it into the table
    var clone2 = document.importNode(t.content, true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";


} 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:


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 26 13 22 No 15 8
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes 26 Yes 22 ? 8 Yes

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.