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);

添加之前：

  • Coffee
  • Tea

添加之后：

  • Coffee
  • Tea
  • Water

Προσπάθησε το σώμα σου

例子 2

从一个列表向另一个列表中移动列表项：

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Πριν τη μετακίνηση:

  • Coffee
  • Tea

  • Water
  • Milk

Μετά τη μετακίνηση:

  • Coffee
  • Tea
  • Milk

  • Water

Προσπάθησε το σώμα σου

Παράδειγμα 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 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη