تگ <template></template> در html

نمونه کد

HTML یک نمونه کد ساده از تگ <template> مثال شماره 1

<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>

آزمایشگاه

تعریف و کاربرد

برای نگهداری بخشی از محتوای مخفی سند های html در زمان بارگیری صفحه هدف، از تگ <template> استفاده می شود.

نکات

سازگاری با مرورگر

#	کروم	ادج	فایرفاکس	سافاری	اپرا
<template>

ویژگی های سراسری

تگ template از ویژگی های سراسری HTML پشتیبانی می کند.

ویژگی های رویداد

تگ template از ویژگی های رویداد HTML پشتیبانی می کند.

نمونه کد های بیشتر

نمونه کد

HTML یک نمونه کد ساده از تگ <template> مثال شماره 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>

آزمایشگاه

تگ <template> در HTML <template></template> tag HTML

نمونه کد

تعریف و کاربرد

نکات

سازگاری با مرورگر

ویژگی های سراسری

ویژگی های رویداد

نمونه کد های بیشتر

نمونه کد

صفحات مرتبط

تگ <template> در HTML
<template></template> tag HTML