تعريفه
نستخدم الوسم <template>
على هذا النحو <template>content</template>
لتجهيز المحتوى الذي سيتم عرضه لاحقاً في الصفحة بشكل مخفي و عند الحاجة لإظهاره يمكن إنشاء نسخة منه بواسطة جافا سكربت.
مكان الكلمة content
نضع كل المحتوى الذي نريد تجهيزه فيه.
إستخدامه
في المثال التالي قمنا بكتابة كود الجافا سكربت الأساسي الذي يسمح بمعرفة ما إن كان المتصفح يدعم الوسم <template>
أم لا يدعمه.
المثال الأول
<script>
// سيتم تنفيذ أمر الطباعة الموضوعة بداخله <template> في حال كان المتصفح يدعم الوسم
if (document.createElement("template").content) {
document.write("Your browser supports the template tag");
}
// سيتم تنفيذ أمر الطباعة الموضوعة بداخله <template> في حال كان المتصفح لا يدعم الوسم
else {
document.write("Your browser doesn not supports the template tag");
}
</script>
جرب الكود
في المثال التالي قمنا بوضع زر عادي في الصفحة و تحته وسم <template>
وضعنا فيه عنوان و فقرة.
عند النقر على الزر سيتم إنشاء نسخة من المحتوى الموجود في الوسم <template>
و إضافتها في الصفحة.
المثال الثاني
<!-- cloneTemplateContent() عند النقر على هذا الزر سيتم استدعاء الدالة
<template> التي تقوم بإنشاء نسخة من المحتوى المجهز بداخل الوسم -->
<button onclick="cloneTemplateContent()">Clone template content</button>
<!-- هنا قمنا بتجهيز المحتوى الذي سيتم إنشاء نسخة منه عند النقر على الزر -->
<template id="demo">
<h2>The Template Tag</h2>
<p>The temaplte tag is used to render the content after the
page is loading.</p>
<hr>
</template>
<!-- التي تقوم بإنشاء و إظهار cloneTemplateContent() هنا قمنا بتعريف الدالة
عندما يتم استدعاءها <template> نسخة من المحتوى الموضوع بداخل الوسم -->
<script>
function cloneTemplateContent() {
if (document.createElement("template").content) {
var temp = document.getElementById("demo");
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
else {
alert("Oops.. Your browser doesn not supports the template tag!");
}
}
</script>
جرب الكود