码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM 元素 appendChild()

❮上一节 ❮ 元素对象参考 下一节❯

示例

将项目追加到列表中：

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
前：
  • Coffee
  • Tea

后：
  • Coffee
  • Tea
  • Water
亲自试一试 »

将项目从一个列表移动到另一个列表：

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);
前：
  • Coffee
  • Tea
  • Water
  • Milk
后：
  • Coffee
  • Tea
  • Milk
  • Water
亲自试一试 »

下面有更多示例。

描述

这个appendChild()方法将一个节点（元素）追加为元素的最后一个子元素。

也可以看看：

insertBefore() 方法

ReplaceChild() 方法

removeChild() 方法

移除()方法

childNodes 属性

第一个子属性

最后一个子属性

firstElementChild 属性

LastElementChild 属性

相关文档方法：

createElement() 方法

createTextNode() 方法

语法

element.appendChild( node)
node.appendChild( node)

参数

Parameter Description
node Required.
The node to append.

返回值

类型 描述
节点 附加的节点。

更多示例

创建带有文本的段落。

  • 创建段落元素
  • 创建文本节点
  • 将文本节点附加到段落
  • 将段落附加到文档中。

创建一个 <p> 元素并将其附加到 <div> 元素：

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");

para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
亲自试一试 »

创建一个 <p> 元素并将其附加到文档的正文中：

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");

para.appendChild(node);
document.body.appendChild(para);
亲自试一试 »

浏览器支持

element.appendChild()是 DOM Level 1 (1998) 功能。

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

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11
❮上一节 ❮ 元素对象参考 下一节❯