HTML DOM 元素 appendChild()
示例
将项目追加到列表
const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
之前
- 咖啡
- 茶
之后
- 咖啡
- 茶
- 水
将项目从一个列表移动到另一个列表
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);
之前
- 咖啡
- 茶
- 水
- 牛奶
之后
- 咖啡
- 茶
- 牛奶
- 水
更多示例如下。
描述
The appendChild() 方法将节点（元素）作为元素的最后一个子节点追加。
另请参见
相关文档方法
语法
element.appendChild(node)或
node.appendChild(node)
参数
| 参数 | 描述 |
| node | 必需。 要追加的节点。 |
返回值
| 类型 | 描述 |
| 节点 | 追加的节点。 |
更多示例
要创建一个包含文本的段落。
- 创建一个段落元素
- 创建一个文本节点
- 将文本节点追加到段落
- 将段落追加到文档。
创建一个 <p> 元素并将其追加到 <div> 元素
const para = document.createElement("p");
const node = document.createTextNode("这是一个段落。");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
尝试一下 »
创建一个 <p> 元素并将其追加到文档的主体
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 |
