template element | template object

The template element is used to declare fragments of HTML that can be cloned and inserted into the document by script. It is the client side approach to handling on demand resource fetching and late rendering of some parts of the DOM, which can be reused.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.12.13

 

DOM Information

Inheritance Hierarchy

 Node
  Element
   HTMLElement
     template

Members

The template object has these types of members:

Properties

The template object has these properties.

PropertyAccess typeDescription

content

Read-only

Returns the contents of a template element

 

Standards information

Remarks

The template element represents nothing in a rendering.

A template and its contents will be inactive until used.

The syntax of a template element's contents are validated even if the template is inactive.

Templates are not considered a part of the document.

Examples

This example shows a script that populates a table of three columns with data from a data structure, using a template to provide the element structure.

JavaScript
Copy 

<title>Patient Data</title>
<script>
   var data = [
   {
      name: 'Ralph',
      gender: 'Male',
      bloodType: 'A'
   },
   {
      name: 'Anna',
      gender: 'Female',
      bloodType: 'O-'
   }, ];
</script>
<table>
   <thead>
      <tr>
         <th>Name
            <th>Gender
               <th>Blood Type
                  <tbody>
                     <!-- make a template for a row of 3 cells -->
                     <template id="row">
                        <tr>
                           <td>
                              <td>
                                 <td>
                     </template>
</table>
<script>
   var template = document.querySelector('#row');
   //Add each patient's data to a new row
   for (var i = 0; i < data.length; i++)
   {
      var patient = data[i];
      var newRow = template.content.cloneNode(true);
      var cell = newRow.querySelectorAll('td');
      cell[0].textContent = patient.name;
      cell[1].textContent = patient.gender;
      cell[2].textContent = patient.bloodType;
      template.parentNode.appendChild(newRow);
   }
</script>

This example produces the following table:

template element example

Another example of using the template element is loading an image on demand as seen in the code snippet below. The code creates a button that when pressed will load the template that contains the img element. The image "picture.jpg" will display because it is set as the img element's src attribute inside the template.

JavaScript
Copy 

<html>
<head>        
    <script>
        //load image
        function loadImage() {
            if ('content' in document.createElement('template')) {

                var imgC = document.getElementById("picsTemplate");

                imgC.content.querySelector('img').src = "picture.jpg";

                //create a deep copy of the template contents
                var clone = document.importNode(imgC.content, true);
                //append newly created markup to DOM                        
                document.getElementById("imgContainer").appendChild(clone);
            } 
                else { /* no template present */ }
        }        
    </script>
</head>
<body> 
    <input type="button" value="Show Image" onclick="loadImage()"/>
    <br/>
    <br/>
    <!--this template is used to host images -->
        <template id="picsTemplate">
            <img src="" alt="image">
            <div ></div>        
        </template>
    <!-- this is the container where newly loaded image will be placed -->
    <div id="imgContainer"><div>
</body>
</html>

See also

Node

 

 

Show: