HTML DOM 元素 appendChild()
示例
向列表中追加一個專案
const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
之前
- 咖啡
- 茶
之後
- 咖啡
- 茶
- Water
將一個專案從一個列表移動到另一個列表
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);
之前
- 咖啡
- 茶
- Water
- 牛奶
之後
- 咖啡
- 茶
- 牛奶
- Water
更多示例見下文。
描述
appendChild() 方法將一個節點（元素）作為最後一個子節點追加到元素中。
另請參閱
相關文件方法
語法
元素.appendChild(節點)或
節點.appendChild(節點)
引數
| 引數 | 描述 |
| node | 必需。 要追加的節點。 |
返回值
| 型別 | 描述 |
| 節點 | 追加的節點。 |
更多示例
建立一個帶文字的段落。
- 建立段落元素
- 建立文字節點
- 將文字節點追加到段落中
- 將段落追加到文件中。
建立一個 <p> 元素並將其追加到 <div> 元素中
const para = document.createElement("p");
const node = document.createTextNode("這是一個段落。");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
自己動手試一試 »
建立一個 <p> 元素並將其追加到文件的 body 中
const para = document.createElement("P");
const node = document.createTextNode("這是一個段落。");
para.appendChild(node);
document.body.appendChild(para);
自己動手試一試 »
瀏覽器支援
element.appendChild() 是 DOM Level 1 (1998) 的特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
