افزودن و حذف گره ها (عناصر 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>
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> ایجاد می کند:

برای اضافه کردن متن به عنصر <p>، ابتدا باید یک گره متنی ایجاد کنید. این کد یک گره متنی ایجاد می کند:

سپس باید گره متن را به عنصر <p> اضافه کنید:

در نهایت شما باید عنصر جدید را به یک عنصر موجود اضافه کنید.

این کد عنصر موجود را پیدا می کند:

این کد عنصر جدید را به عنصر موجود اضافه می کند:

ایجاد عناصر 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 در هیچ نسخه ای از مرورگر اینترنت اکسپلورر کار نمی کند.

تشریح مثال

این سند HTML حاوی عنصر <div> با دو گره فرزند است (دو عنصر <p>):

عنصر را با id = "div1" پیدا کنید:

عنصر <p> را با id = "p1" پیدا کنید:

فرزند را از والدین حذف کنید:

خوب است که بتوانیم عنصر را بدون اشاره به والدین حذف کنیم.
اما متاسفانه DOM نیاز به دانستن پدر و مادر هر عنصر که می خواهید حذف کنید  می باشد

در اینجا یک راه حل معمول وجود دارد: پیدا کردن کودک که می خواهید حذف کنید، و از ویژگی parentNode خود برای پیدا کردن والدین استفاده کنید:

جایگزینی عناصر 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>
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>