آموزش HTML – تگ template

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/15 | بخش : آموزش HTML

تعریف و کاربرد تگ template در HTML

تگ <template> تگی است که با استفاده از آن می توان یک محتوا را در یک صفحه وب قرار داد ولی از نمایش آن در مرورگرها جلوگیری کرد، یعنی در واقع محتویات این تگ در مرورگرها بصورت پیش فرض نمایش داده نمی شود.

حال برای نمایش محتویات تگ <template> می توان از جاوا اسکرپیت استفاده کرد، پس بطور کلی محتویات تگ <template> در یک صفحه وب وجود دارد ولی در مرورگرها نمایش داده نمی شود.

 

مثال از تگ template در HTML

در مثال زیر محتویات تگ <template> با بالا اومدن صفحه نمایش داده نمی شود، ولی با استفاده از یک دکمه آن را ایجاد و نمایش می دهیم.

<button onclick="showtext()">نمایش متن</button>
 
<template>
  <h2>سایتکده</h2>
  <p>سایتکده آموزش آنلاین برنامه نویسی</p>
</template>
 
<script>
function showtext() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

تمرین کنید !

 

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

Element
<template> ۲۶٫۰ ۲۲٫۰ ۱۳٫۰ ۹٫۰ ۱۵٫۰