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