Latest web development tutorials

عناصر DOM HTML

إضافة وحذف واستبدال عناصر HTML.

إنشاء عنصر HTML جديد - appendChild ()

لإضافة عنصر جديد إلى 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>

محاولة »

أمثلة تحليلية

هذا الرمز يخلق عنصر جديد <ص>:

var para=document.createElement("p");

لإضافة نص إلى عنصر <ص>، يجب عليك أولا إنشاء عقدة النص. هذا الرمز يخلق عقدة النص:

var node=document.createTextNode("This is a new paragraph.");

ثم يجب إلحاق عقدة النص إلى عنصر <ص>:

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>


محاولة »

أمثلة تحليلية

وتتضمن هذه الوثيقة HTML <div> العنصر في واحدة من العقد طفلين (اثنان <p> وعنصر) مع:

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

البحث عن معرف = عناصر "div1":

var parent=document.getElementById("div1");

البحث عن معرف = "P1" و<ص> العنصر:

var child=document.getElementById("p1");

إزالة من العنصر الأصلي عناصر فرعية هي:

parent.removeChild(child);

مصباح هل يمكنني حذف عنصر في حالة لا يشير إلى العنصر الأصل؟
آسف. DOM بحاجة إلى فهم العناصر التي تريد حذفها، وكذلك عنصر الأم.

هنا حل مشترك: العثور على عناصر فرعية تحتاج إلى إزالة، ومن ثم استخدام السمة 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>

محاولة »