سبد (0)

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

اضافه و حذف کردن نودها (عناصر 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);
نوشته شده توسط امیر پهلوان صادق
بازدید: 28198

آموزش صوتی JavaScript

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه