<template>: عنصر TEMPLATE
آخر تحديث: 2026-10-13
<template>عنصر TEMPLATE
يعلن عن جزء HTML قابل لإعادة الاستخدام لا يُعرض ولا تعمل سكربتاته، حتى تستنسخه JavaScript وتدرجه.
| الفئة | البرامج النصية والتضمين |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </template> وسم |
| الحالة | قياسي |
📝 البنية
<template id="row">
<tr><td></td></tr>
</template>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <template> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： محتوى template موجود في DOM لكنه غير مرئي وغير فعّال؛ الوصول عبر .content ثم cloneNode.
❓ الأسئلة الشائعة
Qهل يُعرض محتوى template؟
Aلا. محتوى
<template> يُحلَّل عند تحميل الصفحة لكنه لا يُعرض ولا تنفذ سكربتاته ولا تُحمَّل صوره، مخفيًا في «جزء مستند خامل». يبدأ العرض فقط بعد استنساخه بـ JS (content.cloneNode(true)) وإدخاله في DOM، وهو الأسلوب المعياري للقوالب من جانب العميل.Qما الفرق بين template و div بخاصية display:none؟
Aجوهر مختلف: محتوى display:none يظل DOM حيًا — سكربتاته تنفذ وصوره تُحمَّل ومحددات الاستعلام تصل إليه؛ أما محتوى
<template> فخامل تمامًا بلا أثر جانبي ولا تصل إليه المحددات الاعتيادية. لتخزين قوالب للاستخدام لاحقًا لا بد من template.Qهل يدعم template التداخل؟
Aنعم، يمكن وضع template داخل template، وإذا لم يُفعَّل الخارجي بقي الداخلي خاملًا. القوالب المتداخلة تناسب بنى القوائم متعددة الطبقات (قائمة داخل قائمة) بالاستنساخ والتعبئة طبقة بعد طبقة.
🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
