برچسب <template> HTML

تعریف و استفاده

<template> عنصر به عنوان یک محفظه استفاده می‌شود تا در زمان بارگذاری صفحه، برخی از محتوای HTML برای کاربر پنهان شوند.

<template> محتوای داخلی می‌تواند در زمان بعدی با استفاده از JavaScript نمایش داده شود.

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

مثال

مثال 1

استفاده از <template> برای ذخیره‌سازی برخی از محتوای پنهان که در زمان بارگذاری صفحه پنهان می‌شود، استفاده کنید. و از JavaScript برای نمایش آن استفاده کنید:

<button onclick="showContent()">Show hidden content</button>
<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
دستورالعمل showContent() {
  temp = document.getElementsByTagName("template")[0];
  clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

آزمایش کنید

مثال 2

برای هر یک از موارد موجود در آرایه از یک عنصر div جدید برای پر کردن وب‌سایت استفاده کنید. کد HTML هر یک از عناصر div در عنصر template موجود است:

<template>
  <div class="myClass">I like: </div>
</template>
<script>
myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
دستورالعمل showContent() {
  متغیرهای temp, item, a, i;
  temp = document.getElementsByTagName("template")[0];
  item = temp.content.querySelector("div");
  برای (i = 0; i < myArr.length; i++) {
    a = document.importNode(item, true);
    a.textContent += myArr[i];
    document.body.appendChild(a);
  }
}
</script>

آزمایش کنید

مثال 3

بررسی کنید که مرورگرها <template> پشتیبانی:

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

آزمایش کنید

ویژگی‌های جهانی

<template> این برچسب‌ها نیز از ویژگی‌های جهانی HTML.

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که از این ویژگی پشتیبانی می‌کنند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 13.0 22.0 8.0 15.0