HTML template Tag

HTML template Tag – يٌستخدم الوسم <template> كحاوية لإخفاء بعض محتوى HTML عن المستخدم عند تحميل الصفحة، ولكن يمكن عرض المحتوى الموجود داخل <template> لاحقًا أثناء وقت التشغيل باستخدام JavaScript.

HTML template Tag

مثال للتوضيح

شغل إيدك

إستخدام وسم <template> لإخفاء محتوى من المستند عند تحميل الصفحة، ولإظهارة يجب عليك الضغط على الزر:

Example of using template tag

Click on button below to show hidden content!

<h3>Example of using template tag</h3>
<p>Click on button below to show hidden content!</p>
    
<button onclick="showHiddenContent()">Click me to show content</button>
<template id="template">
    <h2>Hello, Dear</h2>
    <p>You sould improve yourself!</p>
</template>
    
<script>
    function showHiddenContent() {
        var template      = document.getElementById("template");
        var cloneTemplate = template.content.cloneNode(true);
        document.body.appendChild(cloneTemplate);
    }
</script>

Example of using template tag

Click on button below to show hidden content!

يقوم المحلل بمعالجة محتويات عنصر <template> أثناء تحميل الصفحة، للتأكد فقط من أن هذه المحتويات صالحة؛ ومع ذلك ، لا يتم عرض محتويات العنصر.

متى تستخدم وسم <template>؟

وسم <template> عبارة عن جزء من المحتوى يتم تخزينه لاستخدامه لاحقًا في المستند. لذلك يمكنك استخدام وسم <template> إذا كان لديك أكواد HTML وتريد استخدامها كثيرًا وفى أكثر من مكان.

مثال – <template>

HTML CODE:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example of using template tag</title>
    
    <style>
        tr, th, td {
          border: 1px solid #999;
        }
        
        table {
          width: 100%;
        }
	</style>
  </head>
  <body>
    <table>
     <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
     </thead>
     <tbody>
        <!-- Content of body will put here [rows] -->
     </tbody>
     <tfoot>
        <!-- Content of footer will put here [rows] -->
     </tfoot>
    </table> 

    <template>
     <tr>
      <td></td>
      <td></td>
     </tr>
    </template>

  </body>
</html>

JavaScript CODE:

// Check if browser support template or not!
if (document.createElement('template').content) {

    // Elements
    var tbody = document.querySelector("tbody");
    var tfoot = document.querySelector("tfoot");
    var template = document.querySelector('template');

    // [1st row for tbody]
    var clone = template.content.cloneNode(true);
    var td = clone.querySelectorAll("td");
    td[0].textContent = "Laptop";
    td[1].textContent = "$1000";

    tbody.appendChild(clone);

    // [2st row for tbody]
    var clone2 = template.content.cloneNode(true);
    var td = clone2.querySelectorAll("td");
    td[0].textContent = "iPhone";
    td[1].textContent = "$2000";

    tbody.appendChild(clone2);

    // [3st row for tbody]
    var clone3 = template.content.cloneNode(true);
    var td = clone3.querySelectorAll("td");
    td[0].textContent = "Keyboard";
    td[1].textContent = "$500";

    tbody.appendChild(clone3);

    // [Final row for tfoot]
    var clone4 = template.content.cloneNode(true);
    var td = clone4.querySelectorAll("td");
    td[0].textContent = "Total";
    td[1].textContent = "$3500";

    tfoot.appendChild(clone4);

} else {
    alert("Sorry, your browser doesn't supports template tag!");
}

Product	Price
Laptop	$1000
iPhone	$2000
Keyboard	$500
Total	$3500

لمعرفة هل المتصفح يدعم وسم <template> أم لا بإستخدام JavaScript

<script>
if (document.createElement("template").content) {
   alert("Your browser supports template tag!");
 } else {
   alert("Sorry, your browser doesn't supports template tag!");
}

// ----- Or -----
if ('content' in document.createElement('template')) {	 	     
  alert("Your browser supports template!");	 	 
} else {	 	 
  alert("Sorry, your browser doesn't supports template tag!"); 	 
}    
</script>