إعلان
تعلم الآن

HTML الوسم <template>

تعريفه

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

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

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
26 13 22 15 8 مدعوم 26 22 ؟ 8 1.5

خصائصه

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

إستخدامه

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

جرب الكود

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

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

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

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

إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة