0Pricing
Frontend Academy · درس

إنشاء العناصر وإلحاقها

استخدم createElement وsetAttribute وappend وremove لبناء بنية DOM وتعديلها ديناميكيًا.

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

createElement

ينشئ document.createElement(tagName) عنصرًا جديدًا في الذاكرة، لكنه لا يوجد في DOM بعد. ثم تُضبط خصائصه وتُضاف إليه الشجرة.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append وappendChild

يضيف parent.append(child) عقدة أو سلسلة نصية إلى نهاية أبناء العنصر الأب. ويُعد appendChild المقابل الأقدم، لكن append أكثر مرونة، إذ يقبل عدة عقد وسلاسل نصية.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend وbefore وafter

تضيف parent.prepend() المحتوى في البداية. وتُدرج element.before() المحتوى قبل العنصر، بينما تُدرجه element.after() بعده.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

تُدرج element.insertAdjacentHTML(position, htmlString) HTML في موضع محدد من دون استبدال المحتوى الموجود. المواضع هي: 'beforebegin' و'afterbegin' و'beforeend' و'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

تنشئ element.cloneNode(true) نسخة عميقة من عنصر، بما في ذلك جميع عناصره التابعة. مرّر false لإنشاء نسخة سطحية. وهذا مفيد لتكرار عناصر القوالب.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild وremove()

تزيل element.remove() العنصر من DOM. كما تعمل الطريقة الأقدم parent.removeChild(child). ويمكن الاستمرار في الإشارة إلى العناصر المُزالة عبر المتغيرات، ثم إعادة إلحاقها.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

تستبدل oldElement.replaceWith(newElement) العنصر القديم في DOM بالعنصر الجديد. وهي أكثر سهولة من نمط replaceChild الأقدم.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment للإدراجات المجمّعة

إن DocumentFragment حاوية خفيفة لا توجد في DOM. أنشئ شجرة فرعية داخلها، ثم ألحِقها بعملية واحدة — يؤدي ذلك إلى إعادة تدفق واحدة فقط بدلًا من N عمليات.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

العنصر &lt;template&gt;

يحتفظ عنصر HTML <template> بترميز لا يُصيَّر حتى يُنسخ باستخدام JavaScript. وهو أفضل من إنشاء السلاسل النصية أو نسخ العناصر الظاهرة.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

ضبط الخصائص مقابل السمات

غالبًا ما تكون خصائص العناصر (el.href وel.src وel.value) الطريقة الأكثر مباشرة وكفاءة لضبط القيم. وتناسب السمات (setAttribute) السمات المخصصة أو سمات ARIA التي لا تملك خاصية DOM مقابلة.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

تجنّب innerHTML مع محتوى المستخدم

عند إنشاء العناصر من بيانات يقدّمها المستخدم، استخدم دائمًا أساليب DOM (createElement وtextContent وsetAttribute) بدلًا من إنشاء سلسلة HTML واستخدام innerHTML. لا تُدرج أبدًا إدخال المستخدم داخل سلاسل HTML.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

تحقّق سريعًا

تحتاج إلى إضافة 100 عنصر قائمة إلى <ul> من دون التسبب في 100 عملية إعادة تدفق. ما الأسلوب الأفضل؟

مراجعة: إنشاء عناصر DOM

ينشئ createElement العناصر في الذاكرة. وتُدرج append وprepend وbefore وafter العناصر في الشجرة. تحذف remove() عنصرًا. ويجمع DocumentFragment عمليات الإدراج لتحسين الأداء. ويخزّن العنصر