JavaScript Element appendChild() 方法

appendChild()方法将节点附加为节点的最后一个子节点。

提示：如果要创建带有文本的新段落，请记住将文本创建为附加到段落的“文本”节点，然后将段落附加到文档中。

您还可以使用此方法将元素从一个元素移动到另一个元素（请参阅“更多示例”）。

提示：使用 insertBefore()方法在指定的现有子节点之前插入新的子节点。

实例：

在列表中追加项目：

var node = document.createElement("LI");            //创建<li>节点
var textnode = document.createTextNode("Water");         //创建一个文本节点
node.appendChild(textnode);                              //将文本附加到<li>
document.getElementById("myList").appendChild(node);     //将<li>附加到<ul>，id =“myList”

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
appendChild()	支持	支持	支持	支持	支持

语法

node.appendChild(node)

参数值

参数	类型	描述
node	Node对象	必需的。要追加的节点对象

技术细节

项目	描述
返回值：	Node对象，表示附加节点
DOM版本	Core Level 1

更多例子

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

var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

尝试一下

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

var para = document.createElement("P");                  //创建一个<p>节点
var t = document.createTextNode("This is a paragraph.");      //创建一个文本节点
para.appendChild(t);                                          //将文本附加到<p>
document.getElementById("myDIV").appendChild(para);           //将<p>附加到<div>，id =“myDIV”

尝试一下

使用一些文本创建<p>元素并将其附加到文档正文的末尾：

var x = document.createElement("P");                   //创建一个<p>节点
var t = document.createTextNode("This is a paragraph.");    //创建一个文本节点
x.appendChild(t);                                           //将文本附加到<p>
document.body.appendChild(x);                               //将<p>附加到<body>

尝试一下

JavaScript Element appendChild() 方法

JavaScript Element appendChild() 方法

浏览器支持

语法

参数值

技术细节

更多例子

相关页面