<template></template> tag HTML

Example

HTML A simple code example of the <template> tag

<h1>template Example</h1>

<button id="showTextButton">Show Text</button>

<template id="textTemplate">
    <div>
    	<p>This is the hidden text.</p>
    </div>
</template>

<script>

    document.getElementById('showTextButton').addEventListener('click', function() {
        
    var templateContent = document.getElementById('textTemplate').innerHTML;

    var newDiv = document.createElement('div');

    newDiv.innerHTML = templateContent;

    document.body.appendChild(newDiv);
    });
</script>

Laboratory

description & Usage

The <template> tag is used to keep part of the hidden content of the html documents when the target page is loaded.

Notes

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<template>

Global Attributes

The template tag supports the HTML Global Attributes.

Event Attributes

The template tag supports the HTML Event Attributes.

More Examples

Example

HTML A simple code example of the <template> tag - Example #1

<template id="userTemplate">
    <div class="user">
        <h2 class="username"></h2>
        <p class="email"></p>
	</div>
</template>

<script>

    var users = [
    { username: 'username : ali_heydari', email: 'heydari@gmail.com' },
    { username: 'username : ali_akbri', email: 'akbri@gmail.com' },
    { username: 'username : ali_mahmodi', email: 'mahmodi@gmail.com' }
    ];

    var userTemplate = document.getElementById('userTemplate');
    var userContainer = document.createElement('div');

    users.forEach(function(user) {
    var clone = document.importNode(userTemplate.content, true);
    clone.querySelector('.username').textContent = user.username;
    clone.querySelector('.email').textContent = user.email;
    userContainer.appendChild(clone);
    });

    document.body.appendChild(userContainer);
</script>

Laboratory

<template></template> tag HTML

Example

description & Usage

Notes

Browser compatibility and Support

Global Attributes

Event Attributes

More Examples

Example

Related Pages