before, after, prepend, append remove

✅ لإضافة عناصر أو نصوص أو حذفها داخل أو خارج عنصر معيّن

لنفترض أن لدينا هذا العنصر:

<div id="box">محتوى العنصر</div>
JavaScript
✅ 1. before()

➕ يضيف عنصر قبل العنصر الحالي في نفس المستوى (خارج العنصر)

const box = document.getElementById("box");

box.before("🟡 عنصر قبل div"); // نص
// أو عنصر:
const newElement = document.createElement("p");
newElement.textContent = "فقرة قبل العنصر";
box.before(newElement);
JavaScript
✅ 2. after()

➕ يضيف عنصر بعد العنصر الحالي في نفس المستوى (خارج العنصر)

box.after("🟢 عنصر بعد div");

const afterEl = document.createElement("h4");
afterEl.textContent = "عنوان بعد العنصر";
box.after(afterEl);
JavaScript
✅ 3. prepend()

➕ يضيف عنصر أو نص داخل العنصر، في البداية

box.prepend("🔵 هذا النص في بداية العنصر");

const span = document.createElement("span");
span.textContent = "عنصر داخلي في البداية";
box.prepend(span);
JavaScript
✅ 4. append()

➕ يضيف عنصر أو نص داخل العنصر، في النهاية

box.append("🟣 هذا النص في نهاية العنصر");

const img = document.createElement("img");
img.src = "image.jpg";
box.append(img);
JavaScript
✅ 5. remove()

❌ يحذف العنصر نفسه من الصفحة

box.remove();
JavaScript
📌 مقارنة سريعة:
الدالةمكان الإضافةداخل/خارج العنصر؟
before()قبل العنصرخارج العنصر
after()بعد العنصرخارج العنصر
prepend()أول محتوى داخليداخل العنصر
append()آخر محتوى داخليداخل العنصر
remove()حذف العنصر نفسه–
🧪 مثال كامل:
<div id="content">أنا المحتوى</div>
<button onclick="addThings()">نفّذ</button>
JavaScript
function addThings() {
  const content = document.getElementById("content");

  content.before("🔼 قبل");
  content.after("🔽 بعد");
  content.prepend("⬅️ أول المحتوى ");
  content.append(" ➡️ آخر المحتوى");
}
JavaScript