مетод HTML DOM Element appendChild()
- صفحه قبلی addEventListener()
- صفحه بعدی attributes
- به لایه بالاتر برگردید موضوع Elements HTML DOM
تعریف و استفاده
appendChild() این روش یک گره (عنصر) را به عنوان آخرین فرزند عنصر اضافه می‌کند.
لطفاً ببینید:
روش‌های مرتبط:
مثال
مثال 1
افزودن آیتم به لیست:
const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
قبل از اضافه کردن:
- قهوه
- چای
پس از اضافه کردن:
- قهوه
- چای
- آب
مثال 2
یک عنصر لیست از یک لیست به لیست دیگر منتقل می‌کنیم:
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);
قبل از حرکت:
- قهوه
- چای
- آب
- شیر
بعد از حرکت:
- قهوه
- چای
- شیر
- آب
مثال 3
پاراگراف با متن ایجاد شود:
- علامت پاراگراف ایجاد شود
- نود متن ایجاد شود
- نود متن به پاراگراف اضافه شود
- پاراگراف به مستند اضافه شود
یک علامت <p> ایجاد کنید و آن را به علامت <div> اضافه کنید:
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
مثال 4
یک علامت <p> ایجاد کنید و آن را به متن اصلی مستند اضافه کنید:
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
نحوه استفاده
element.appendChild(node)
یا
node.appendChild(node)
پارامتر
| پارامتر | توضیح |
|---|---|
| node | ضروری. نود باید اضافه شود. |
مقدار بازگشتی
| نوع | توضیح |
|---|---|
| نود | نود اضافی. |
پشتیبانی مرورگر
element.appendChild() این یک ویژگی DOM Level 1 (1998) است.
همه مرورگرها به طور کامل از آن پشتیبانی می کنند:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| پشتیبانی | 9-11 | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
- صفحه قبلی addEventListener()
- صفحه بعدی attributes
- به لایه بالاتر برگردید موضوع Elements HTML DOM
