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 支持 支持 支持 支持