HTML الوسم <template>

تعريفه

نستخدم الوسم <template> على هذا النحو <template>content</template> لتجهيز المحتوى الذي سيتم عرضه لاحقاً في الصفحة بشكل مخفي و عند الحاجة لإظهاره يمكن إنشاء نسخة منه بواسطة جافا سكربت.

مكان الكلمة content نضع كل المحتوى الذي نريد تجهيزه فيه.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <template>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بكتابة كود الجافا سكربت الأساسي الذي يسمح بمعرفة ما إن كان المتصفح يدعم الوسم <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>
		

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

إذاً يمكنك الإستفادة من هذا الوسم في حال كنت تريد تجهيز محتوى في الصفحة و هذا المحتوى قد تحتاج عرضه نفسه لاحقا أكثر من مرة.