InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML tags

  • audio
  • input checkbox
  • label
  • li
  • ol
  • pre
  • template
  • ul
  • video
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML tag

HTML5 template tag hello world tutorial

By admin on Jan 31, 2016

HTML5 template tag can be used to define template in html and instantiate it when needed. The instantiated template can be inserted in any DOM element using appendChild.
html5-tempate-tag

template tag example using vanilla Javascript

<template id="t1">
  <div>Template instance: <span class="instance-num">0</span></div>
</template>
<div id="container"><div>Some content</div></div>
<script type="text/javascript">
window.addEventListener("load", init);
function init() {
  for(var i=0; i < 3; i++) {
    var content = document.querySelector('#t1').content;
    var span = content.querySelector('.instance-num');
    span.textContent = i;
    document.querySelector('#container').appendChild(
      document.importNode(content, true));
  }
}
</script>
refresh done
try it online

Few points to note about template

  1. .content property can be used to get content of a template dom element.
  2. document.importNode(content, true) imports template content with depth=true to include its children.
  3. template tag is supported by Chrome and Firefox and not by IE. One can see more info at template tag support.
  4. Images etc. in template are not loaded till template is cloned/instantiated.

Specification and Browser compatibility

SpecificationStatusCategories
HTML templatesWHATWG Living StandardDOM, HTML5
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 26+ Yes 22+ NoYes 13+ Yes 7.1+ Yes 15+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 8+ NoYes 33+
source: caniuse.com

Suggested posts:

  1. HTML5 shadow dom example
  2. AngularJS – include url template
  3. AngularJS – include inline template
  4. HTML5 audio tag
  5. HTML5 – video tag
  6. AngularJS ng-bind-template example
  7. Chrome extension tutorial – hello world
  8. AngularJS – implement tabs using ng-switch
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML tag, HTML5, Javascript, Tutorials, Web components

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2021 InfoHeap.

Powered by WordPress