HTML DOM Element appendChild() 方法

HTML DOM Elements 对象

定义和用法

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(node)

或

node.appendChild(node)

参数

返回值

浏览器支持

element.appendChild() 是 DOM Level 1 (1998) 特性。

所有浏览器都完全支持它：

HTML DOM Elements 对象