اضافه و حذف کردن نودها (عناصر HTML)

ایجاد کردن یک عنصر جدید

Wiki

برای اضافه کردن یک عنصر جدید در مدل DOM، ابتدا باید عنصر را ایجاد کنید و سپس آنرا به یک عنصر موجود، اضافه نمایید.

 مثال (ایجاد کردن یک عنصر در JavaScript)

<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);

حذف کردن یک عنصر موجود

Wiki

برای حذف کردن یک عنصر HTML، ابتدا باید والد (parent) آنرا مشخص نمایید:

مثال (ایجاد کردن یک عنصر در JavaScript)

<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> همراه با دو فرزند (child) است (دو عنصر <p>):

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

ابتدا عنصر با شناسه "div1" را به عنوان والد، شناسایی می کنیم: (متغیر یا شیء parent)

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

سپس عنصر با شناسه "p1" را به عنوان فرزند، شناسایی می کنیم: (متغیر یا شیء child)

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

در آخر، از شی parent به عنوان والد، شی child به عنوان فرزند، حذف می شود:

parent.removeChild(child);

توجه: برای حذف کردن یک عنصر در مدل DOM، باید حتماً والد آنرا مشخص نمایید.

راه حل معمول برای مشخص کردن والد، استفاده از خصوصیت parentNode است:

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