وسم القالب الخامل <template>

وسم template يخزّن قطعة HTML خاملة لا تُعرض ولا تُنفّذ حتى تستنسخها بالجافاسكريبت — أساس القوالب المتكررة.

كل ما بداخل template معطّل تمامًا: لا يظهر في الصفحة، وصوره لا تُحمَّل، وسكربتاته لا تعمل. المتصفح يخزّنها فقط بانتظار طلبك. تصل إليها بخاصية content التي تعيد DocumentFragment، تستنسخه بـ document.importNode(template.content, true) ثم تُلحقه بالصفحة — فتتكرر بطاقة أو صف جدول مئات المرات من قالب واحد مكتوب مرة.

الفرق عن بناء HTML كسلسلة نصية بالجافاسكريبت (innerHTML): القالب حقيقي ومُتحقق منه في شجرة DOM من البداية، فلا أخطاء صياغة خفية ولا مخاطر أمنية من دمج نصوص مستخدمين مباشرة.

الصياغة

<template id="row">
  <li class="item"></li>
</template>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<ul id="list"></ul>
<template id="row">
  <li style="padding:6px; border-bottom:1px solid #eee"></li>
</template>
<script>
  const tpl = document.getElementById('row');
  const list = document.getElementById('list');
  ['HTML', 'CSS', 'JavaScript'].forEach(name => {
    const clone = document.importNode(tpl.content, true);
    clone.querySelector('li').textContent = name;
    list.appendChild(clone);
  });
</script>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
content (خاصية جافاسكريبت لا HTML)	تعيد محتوى القالب كـ DocumentFragment جاهزًا للاستنساخ
id	للوصول إلى القالب بـ getElementById قبل استنساخه

💡 نصائح عملية

استنسخ دائمًا بـ document.importNode أو cloneNode(true) — لا تُلحق template.content نفسه فتُفرغه من محتواه
بديل آمن وسريع عن بناء HTML بدمج نصوص (innerHTML) خصوصًا مع بيانات قادمة من المستخدم

⚠️ أخطاء شائعة

توقع ظهور محتوى template في الصفحة دون جافاسكريبت — يبقى خاملًا للأبد بلا استنساخ
البحث عن عناصره بـ document.querySelector مباشرة — أبناؤه ليسوا جزءًا من شجرة المستند الظاهرة، فتّش داخل content

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs