‎‎تگ تمپليتHTML <template> Tag -‎

‎مثال ـ استفاده از تگ‎<tempate>‎ براي نگهداري محتوي كه هنگام لود صفحه پنهان ‎بوده وبا جاوااسكريپت ميتواند نمايش داده شود.

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

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script > 

‎‎تعريف وكاربردDefinition and Usage -‎

‎تگ‎<template>‎ براي تعريف محفظه اي استفاده ميشود كه محتوي آن پنهان مي ماند . ‎اما كاربر ميتواند با كليك نمايش دهد .اين كار ازطريق جاوااسكريپت انجام ميگيرد.

‎همه تگهايHTML هنگام بارگداري اجرا ميشوند، اما براي تگ ‎<template>‎ اين اتفاق ‎نمي افتد و با دخالت كاربر جاوااسكريپت آنر اجرا مي نمايد .اسكريپت جاوااسكريپت براي لين كار ‎بايد توسط توسعه دهنده تنظيم شود.

‎اين تگ براي مواردي كه از يك مجموعه كد ميخواهيد بارها استفاده نمائيد ، كاربرد دارد .وبا در ‎درخواست آن با جاوااسكريپت تعبيه شده اجرا ميگردد.

‎‎پشتيباني مرورگرBrowser Support -‎

‎

‎Element‎
‎‎<template>‎‎	‎‎26.0‎	‎‎13.0‎	‎‎22.0‎	‎‎8.0‎	‎‎15.0‎

‎‎ويژگي هاي جهانيGlobal Attributes -‎

‎‎تگ‎<template>‎ از ويژگي هاي جهانيHTML پيروي ميكند.

‎‎مثالهاي بيشتر

‎‎مثال ـ

<script>
let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
  let 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 > 

‎مرجع كامل تگهايHTML‎
‎مرجع كامل ويژگيهايHTML‎

HTML Reference فهرست ها

HTML References

HTML TAGS --