HTML DOM Element appendChild() 方法

定义和用法

appendChild() 方法将节点（元素）作为最后一个子元素添加到元素。

另请参阅：

insertBefore() 方法

replaceChild() 方法

removeChild() 方法

remove() 方法

childNodes 属性

firstChild 属性

lastChild 属性

firstElementChild 属性

lastElementChild 属性

相关的文档方法：

createElement() 方法

createTextNode() 方法

实例

例子 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(نود)

یا

نود.appendChild(نود)

پارامتر

پارامتر وصف
نود لازم ہے۔ دودھ میں لگائے جانے والے نود کو

بازگشتی مرتبہ

نوع وصف
نود جو دودھ میں لگا گیا نود

براوزر کا دعماً

element.appendChild() یہ DOM Level 1 (1998) کی خصوصیت ہے。

تمام براوزر اس کو پورا طور پر دعماً دیتی ہیں:

کروم آئی ای ایج فائر فاکس سافری آپریا
کروم آئی ای ایج فائر فاکس سافری آپریا
دعماً 9-11 دعماً دعماً دعماً دعماً