HTML - tags - template tag

revision:

Content

"template" tag : a container to hold some HTML elements hidden syntax some examples

"template" tag : a container to hold some HTML elements hidden

top

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside "template" can be rendered later with JavaScript.

The "template" tag can be used if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the "template" tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.

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.

Attributes: the <template> element supports the global attributes and events attributes.

Syntax

top

<template> . . . </template>

some examples

top

Click the button below to display the hidden content from the template element.

Codes: 
                    <div>
                    <p class="spec">Click the button below to display the hidden content from the template element.</p>
                    <button style="margin-left:4vw;" onclick="showContent()">Show hidden content</button>
                    <p id="mine"></p>
                    <template>
                        <h3>Flower</h3>
                        <img src="../../pics/img_white_flower.jpg" width="214" height="204">
                    </template>
                    <script>
                        function showContent() {
                            var temp = document.getElementsByTagName("template")[0];
                            var clon = temp.content.cloneNode(true);
                            document.getElementById("mine").appendChild(clon);
                        }
                    </script>

Click the button below to display the hidden content from the template element.

Codes 
                  <div class="spec">
                    <style>
                        .myClass {color: white; background-color: DodgerBlue; padding: 20px; text-align: center; margin: 10px;}
                    </style>
                    <p class="spec">Click the button below to display the hidden content from the template element.</p>
                    <button class="spec" onclick="showContent_a()">Show hidden content</button>
                    <template>
                        <div class="myClass">I like: </div>
                    </template>
                    <p id="me"></p>
                    <script>
                        var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
                        function showContent_a() {
                            var temp, item, a, i;
                            temp = document.getElementsByTagName("template")[1];
                            item = temp.content.querySelector("div");
                            for (i = 0; i < myArr.length; i++) {
                                a = document.importNode(item, true);
                                a.textContent += myArr[i];
                                document.getElementById("me").appendChild(a);
                            }
                        }
                    </script>