HTML <template> Tag

<!-- JavaScript function: Clones the template and appends it to the normal content -->
<button onclick="addRow();">Add Row</button>

<!-- Template Content -->
<template id="newRow">
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</template>

<!-- Normal Content -->
<table border="1" id="myTable" contenteditable>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
</table>

<script>
function addRow() {
var myTemplate = document.getElementById('newRow'),
    normalContent = document.getElementById('myTable'),
    clonedTemplate = myTemplate.content.cloneNode(true);
    normalContent.appendChild(clonedTemplate);
    }
</script>
Header 1Header 2Header 3

The above example demonstrates usage of the <template> element. This example uses JavaScript to clone a table row and append it to the table.

The <template> element can be used to declare fragments of HTML that can be cloned and inserted in the document by script. These fragments of code fragments are not used when the document loads, but can be used later (like when the user triggers an event for example).

When the <template> element's contents are used, they are cloned and inserted into the DOM. This enables you to use it multiple times. You can also make additions to the contents.

Prior to it being used, the <template> element's contents are not part of the document and therefore, you can't reference its contents through the DOM.