Sunday, April 3, 2016

HTML5 template tag. - And also the script tag with type as text/template.

MDN Definition of template tag says The HTML template tag <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but subsequently be instantiated during runtime using JavaScript.

Read from this blog, http://www.html5rocks.com/en/tutorials/webcomponents/template/, on how to use and access the template tag contents.

Also the script tag with type as text/template works the same way:

By setting the type to "text/template", it's not a script that the browser can understand, and so the browser will simply ignore it. This allows you to put anything in there, which can then be extracted later and used by a templating library to generate HTML snippets.

<!doctype html>
<head>
<head>
<script>
window.onload=function(){
    document.getElementById('targetDiv').innerHTML = document.getElementById('hiddenTemplate').textContent;
};
</script>
</head>
<body>
<script id="hiddenTemplate" type="text/template">
    Type something: <input type="text" id="mailbox" />
    <button id="postMsgBtn">Send this message to main window</button>
    <div id="msg"></div>
</script>

<div id="targetDiv"></div>
</body>
</html>

Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)