برچسب <template> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
یک الگو را تعریف می‌کند
معرفی شده در نسخهٔ:نامشخص‏
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:ندارد

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

عنصر template، کد اچ‌تی‌ام‌ال را بدون نمایش آن نگهداری می‌کند:[۱]

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Flower</h2>
  <img src="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.body.appendChild(clon);
}
</script>


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

برچسب <template> از محتوایش بگونه‌ای نگهداری می‌کند که از مشتری پنهان باشد.

محتوای درون برچسب <template> رندر نخواهد شد.

می‌توان بعدتر با جاوااسکریپت محتوا را نمایان و رندر کرد.

از برچسب <template> هنگامی استفاده کنید که کد یک اچ‌تی‌ام‌ال دارید که قرار است بارها و بارها از آن استفاده کنید، ولی نه تا وقتی که برای آن درخواست داده باشید. برای انجام این عمل بدون برچسب <template>، شما باید یک کد اچ‌تی‌ام‌ال با جاوااسکریپت برای ممانعت از رندر کد توسط مرورگر ایجاد کنید.

پشتیبانی مرورگر

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<template> ۲۶٫۰ ۱۳٫۰ ۲۲٫۰ ۸٫۰ ۱۵٫۰

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

برچسب <template> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

مثال‌های بیشتر

مثال

Fill the web page with one new div element for each item in an array. The HTML code of each div element is inside the template element:

صفحه وب را با یک عنصر جدید div به ازای هر مورد در آرایه، پر کنید. کد اچ‌تی‌ام‌ال هر عنصر div درون عنصر template قرار دارد:

<template>
  <div class="myClass">I like: </div>
</template>

<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
  var temp, item, a, i;
  temp = document.getElementsByTagName("template")[0];
  item = temp.content.querySelector("div");
  for (i = 0; i < myArr.length; i++) {
    a = document.importNode(item, true);
    a.textContent += myArr[i];
    document.body.appendChild(a);
  }
}
</script>


مثال

پشتیبانی مرورگر برای عنصر template را بیازمایید:


<script>
if (document.createElement("template").content) {
  document.write("Your browser supports template!");
} else {
  document.write("Your browser does not supports template!");
}
</script>


منابع آموزشی