ReadmeGen - عنصر <template>

الاستخدام:

لتحديد جزء من محتوى HTML يتم استخدامه كقالب لتوليد عناصر جديدة أو نسخ من المحتوى في المستند.
يمكن إخفاء محتوى القالب حتى يتم استخدامه لتوليد عناصر جديدة.

الخصائص:

لا توجد خصائص محددة للعلامة <template>.

أمثلة على استخدام:

إنشاء قوائم ديناميكية: إنشاء قالب قائمة واحدة وإضافة عناصر جديدة إليها ديناميكيًا باستخدام JavaScript.
إعادة استخدام المحتوى: تخزين المحتوى الذي سيتم إعادة استخدامه في قالب وإدراجه في أماكن مختلفة من المستند.
إخفاء المحتوى حتى الحاجة إليه: إخفاء محتوى القالب حتى يتم استخدامه لتجنب تحميله مسبقًا.

مثال HTML بسيط لاستكشاف علامة <template>:

<!DOCTYPE html>
<html>
<head>
  <title>استكشاف علامة <template></title>
</head>
<body>
  <!-- قالب قائمة -->
  <template id="list-item-template">
    <li>{{element}}</li>
  </template>

  <!-- استخدام القالب -->
  <script>
    // الحصول على قالب عنصر القائمة
    const template = document.getElementById('list-item-template');

    // إنشاء عناصر قائمة جديدة من القالب
    const list = document.createElement('ul');

    for (let element of ['عنصر 1', 'عنصر 2', 'عنصر 3']) {
      // استنساخ قالب عنصر القائمة
      const item = template.content.cloneNode(true);

      // تحديث محتوى عنصر القائمة
      item.querySelector('li').textContent = element;

      // إضافة عنصر القائمة إلى القائمة
      list.appendChild(item);
    }

    // إضافة القائمة إلى الصفحة
    document.body.appendChild(list);
  </script>
</body>
</html>

ملاحظة للنسخة المعدلة:

تم تحديث المثال HTML لتوفير فهم أفضل لكيفية استخدام علامة <template> لإنشاء قوائم ديناميكية.
تمت إضافة تعليقات توضيحية لجعل الكود أكثر سهولة في المتابعة.