تسمية <template> في HTML

  • الصفحة السابقة <td>
  • الصفحة التالية <textarea>

التعريف والاستخدام

<template> القوالب كحاوية لاخفاء بعض المحتويات HTML عند تحميل الصفحة.

<template> المحتوى يمكن استخدامه لاحقاً باستخدام JavaScript.

إذا كان لديك بعض الرموز HTML التي ترغب في تكرار استخدامها، ولكن يجب عرضها عند الحاجة، يمكنك استخدام <template> القوالب. إذا لم يكن هناك <template> القوالب، تحتاج إلى استخدام JavaScript لإنشاء رمز HTML لمنع عرضه من قبل متصفح الويب.

مثال

مثال 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>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

جرب بنفسك

مثال 2

为数组中的每一项使用一个新的 div 元素填充网页。每个 div 元素的 HTML 代码都在 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>

جرب بنفسك

مثال 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
  • الصفحة السابقة <td>
  • الصفحة التالية <textarea>