متد element.appendChild

مثال (متد element.appendChild)

اضافه کردن یک آیتم در یک لیست:

var node = document.createElement("LI");                 // Create a <li> node
var textnode = document.createTextNode("Water");         // Create a text node
node.appendChild(textnode);                              // Append the text to <li>
document.getElementById("myList").appendChild(node);     // Append <li> to <ul> with id="myList"

قبل از اضافه کردن:

Coffee
Tea

بعد از اضافه کردن:

Coffee
Tea
Water

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

متد ()appendChild یک گره را بعنوان آخرین فرزند به یک گره دیگر اضافه می کند.

نکته: در صورتی که می خواهید یک پاراگراف به همراه کمی متن را ایجاد کنید، به خاطر داشته باشید که باید متن مورد نظر را بعنوان یک گره متنی به پاراگراف مورد نظر اضافه کنید و سپس پاراگراف را به سند اضافه کنید.

شما همچنین می توانید از این متد، برای انتقال یک عنصر به یک عنصر دیگر استفاده کنید.

نکته: می توانید از متد insertBefore() برای اضافه کردن یک گره فرزند قبل از یک گره فرزند مشخص شده ی دیگر(در صورت وجود) استفاده کنید.

پشتیبانی مرورگرها

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این متد پشتیبانی می کند.

متد
appendChild()	1.0	بله	1.0	بله	بله

نحوه استفاده

node.appendChild(node)

مقادیر پارامترها

پارامتر	Type	توضیحات
node	Node object	ضروری. شیء گره ای که شما می خواهید اضافه کنید.

جزئیات تکنیکی

مقدار برگشتی	یک شیء، که مشخص کننده ی گره اضافه شده می باشد.
DOM Version	Core Level 1 Node Object

مثال - خودتان امتحان کنید

مثال (متد element.appendChild)

انتقال دادن یک آیتم لیست، از یک آیتم لیست دیگر:

var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

قبل از اضافه کردن:

Coffee
Tea

Water
Milk

بعد از اضافه کردن:

Coffee
Tea
Milk

Water

خودتان امتحان کنید »

مثال (متد element.appendChild)

ایجاد یک عنصر <p> و اضافه کردن آن به یک عنصر <div>:

var para = document.createElement("P");                       // Create a <p> node
var t = document.createTextNode("This is a paragraph.");      // Create a text node
para.appendChild(t);                                          // Append the text to <p>
document.getElementById("myDIV").appendChild(para);           // Append <p> to <div> with id="myDIV"

خودتان امتحان کنید »

مثال (متد element.appendChild)

ایجاد یک عنصر <p> با مقداری متن و اضافه کردن آن به انتهای قسمت body از سند:

var x = document.createElement("P");                        // Create a <p> node
var t = document.createTextNode("This is a paragraph.");    // Create a text node
x.appendChild(t);                                           // Append the text to <p>
document.body.appendChild(x);                               // Append <p> to <body>

خودتان امتحان کنید »