عناصر JavaScript HTML DOM (العقد)
إضافة العقد وإزالتها (عناصر HTML)
إنشاء عناصر HTML جديدة (العقد)
لإضافة عنصر جديد إلى HTML DOM ، يجب عليك إنشاء العنصر (عقدة العنصر) أولاً ، ثم إلحاقه بعنصر موجود.
مثال
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
شرح المثال
ينشئ هذا الرمز <p>عنصرًا جديدًا:
const para = document.createElement("p");
لإضافة نص إلى <p>العنصر ، يجب إنشاء عقدة نص أولاً. ينشئ هذا الرمز عقدة نصية:
const node = document.createTextNode("This is a new paragraph.");
ثم يجب عليك إلحاق العقدة النصية <p>بالعنصر:
para.appendChild(node);
أخيرًا ، يجب عليك إلحاق العنصر الجديد بالعنصر الحالي.
يجد هذا الرمز عنصرًا موجودًا:
const element = document.getElementById("div1");
تلحق هذه الشفرة العنصر الجديد بالعنصر الحالي:
element.appendChild(para);
إنشاء عناصر HTML جديدة - insertBefore ()
الطريقة appendChild()في المثال السابق ، تلحق العنصر الجديد كآخر عنصر تابع للوالد.
إذا كنت لا تريد ذلك يمكنك استخدام insertBefore()الطريقة:
مثال
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
إزالة عناصر HTML الموجودة
لإزالة عنصر HTML ، استخدم remove()
الطريقة:
مثال
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
شرح المثال
يحتوي مستند HTML على <div>عنصر به عقدتان فرعيتان ( <p>
عنصران):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
ابحث عن العنصر الذي تريد إزالته:
const elmnt = document.getElementById("p1");
ثم نفّذ طريقة الإزالة () على هذا العنصر:
elmnt.remove();
الطريقة remove()لا تعمل في المتصفحات القديمة ، انظر المثال أدناه حول كيفية استخدامها
removeChild()بدلاً من ذلك.
إزالة عقدة الطفل
بالنسبة إلى المتصفحات التي لا تدعم هذه remove()الطريقة ، يجب عليك العثور على العقدة الأصلية لإزالة عنصر:
مثال
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
شرح المثال
يحتوي مستند HTML هذا على <div>عنصر به عقدتان فرعيتان ( <p>
عنصران):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
ابحث عن العنصر باستخدام id="div1":
const parent = document.getElementById("div1");
ابحث عن <p>العنصر باستخدام id="p1":
const child = document.getElementById("p1");
إزالة الطفل من الوالد:
parent.removeChild(child);
فيما يلي حل بديل شائع: ابحث عن الطفل الذي تريد إزالته ، واستخدم
parentNodeالخاصية الخاصة به للعثور على الوالد:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
استبدال عناصر HTML
لاستبدال عنصر بـ HTML DOM ، استخدم replaceChild()الطريقة:
مثال
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>