JavaScript Academy · درس

إنشاء العناصر وإدراجها

أنشئوا عقدًا جديدة باستخدام createElement وappend.

إنشاء العناصر وإدراجها درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

إنشاء عناصر جديدة

بدلًا من كتابة سلاسل HTML، يمكنك إنشاء العناصر باستخدام التعليمات البرمجية. ويؤدي ذلك إلى تجنب XSS، كما يمنحك مرجعًا حقيقيًا للعنصر لتكوينه.

createElement

ينشئ document.createElement عنصرًا جديدًا منفصلًا. يكون العنصر موجودًا في الذاكرة، لكنه لا يكون قد أُضيف إلى الصفحة بعد.

const li = document.createElement("li");
li.textContent = "New item";

تهيئة العنصر قبل إدراجه

اضبطوا الفئات والسمات والمحتوى بينما يكون العنصر منفصلًا عن المستند. ولن يصبح مرئيًا إلا بعد إدراجه.

const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";

append

تضيف append العقد (أو السلاسل النصية) باعتبارها أبناء الأخيرين للعنصر. ويمكنها قبول عدة معاملات.

const list = document.querySelector("ul");
list.append(li);

prepend

تُدرج prepend العقد باعتبارها الأبناء الأولين، فتدفع الأبناء الموجودين إلى الأسفل.

list.prepend(document.createElement("li"));

append يقبل السلاسل النصية

بخلاف appendChild الأقدم، يمكن لـ append قبول سلاسل نصية عادية وعدة معاملات في آن واحد.

const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");

appendChild

تُعدّ appendChild الطريقة التقليدية. فهي تقبل عقدة واحدة فقط وتعيدها، بينما تعيد append القيمة undefined.

const node = list.appendChild(document.createElement("li"));

insertBefore

تضع insertBefore عقدة جديدة قبل ابن موجود محدد، مما يتيح تحديد موضعها بدقة.

const ref = list.children[1];
list.insertBefore(li, ref);

insertAdjacentElement

تُدرج insertAdjacentElement عنصرًا بالنسبة إلى عنصر آخر باستخدام مواضع مثل beforebegin وafterbegin وbeforeend وafterend.

ref.insertAdjacentElement("beforebegin", li);

DocumentFragment للدفعات

عند إضافة عناصر كثيرة، أنشئوها أولًا داخل DocumentFragment، ثم أدرجوها مرة واحدة. يقلل ذلك من عمليات إعادة التدفق ويجعل التنفيذ أسرع.

const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Row " + i;
  frag.append(item);
}
list.append(frag);

cloneNode

تنسخ cloneNode(true) عنصرًا وجميع العناصر المتفرعة منه، وهو ما يفيد في إنشاء بنى متكررة باستخدام القوالب.

const copy = li.cloneNode(true);
list.append(copy);

اختبار سريع

اختاروا الأسلوب الأفضل.

مراجعة

استخدموا createElement لإنشاء عناصر منفصلة عن المستند وتهيئتها، ثم أدرجوها باستخدام append/prepend (مع السماح بالسلاسل النصية والعديد من المعاملات)، أو appendChild (لعقدة واحدة)، أو insertBefore/insertAdjacentElement لتحديد المواضع بدقة. وعند إجراء عمليات إدراج كثيرة، استخدموا DocumentFragment، وأعيدوا استخدام البنى باستخدام cloneNode(true).

الأسئلة الشائعة

هل درس «إنشاء العناصر وإدراجها» مجاني؟

نعم — نص درس «إنشاء العناصر وإدراجها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء العناصر وإدراجها»؟

أنشئوا عقدًا جديدة باستخدام createElement وappend. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «إنشاء العناصر وإدراجها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy