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("هذا هو فقرة.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

جرب بنفسك

مثال 4

إنشاء عنصر <p> وإضافته إلى النص الرئيسي للوثيقة:

const para = document.createElement("P");
const node = document.createTextNode("هذا هو فقرة.");
para.appendChild(node);
document.body.appendChild(para);

جرب بنفسك

النصوص

النقطة.appendChild(النقطة)

أو

النقطة.appendChild(النقطة)

الم 参数

الم 参数 الوصف
النقطة مطلوب. النقطة التي سيتم إضافتها.

القيمة المعدلة

النوع الوصف
النقطة النقاط التي تم إضافتها.

دعم المتصفح

element.appendChild() هي خاصية DOM Level 1 (1998).

يدعم جميع المتصفحات بشكل كامل:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
دعم 9-11 دعم دعم دعم دعم