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