HTML DOM appendChild() 方法
实例
在列表中添加项目:
var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.getElementById("myList").appendChild(node); // Append <li> to <ul> with id="myList"
添加之前:
- Coffee
- Tea
添加之后:
- Coffee
- Tea
- Water
页面下方有更多实例。
定义和用法
appendChild() 方法向节点添加最后一个子节点。
提示: 如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
提示: 使用 insertBefore() 方法在指定的现有子节点之前插入新的子节点。
浏览器支持
| 方法 | |||||
|---|---|---|---|---|---|
| appendChild() | Yes | Yes | Yes | Yes | Yes |
语法
node.appendChild(node)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| node | Node 对象 | 必需的。您希望添加的节点对象。 |
技术细节
| 返回值: | Node 节点对象，表示附加的节点 |
|---|---|
| DOM 版本 | Core Level 1 Node Object |
更多实例
实例
将列表项从一个列表移动到另一个列表:
var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
添加之前:
- Coffee
- Tea
- Water
- Milk
添加之后:
- Coffee
- Tea
- Milk
- Water
实例
创建一个 <p> 元素并将其附加到 <div> 元素:
var para = document.createElement("P"); // Create a <p> node
var t = document.createTextNode("This is a paragraph."); // Create a text node
para.appendChild(t); // Append the text to <p>
document.getElementById("myDIV").appendChild(para); // Append <p> to <div> with id="myDIV"
亲自试一试 »
实例
创建一个包含一些文本的 <p> 元素，并将其附加到文档正文的末尾:
var x = document.createElement("P"); // Create a <p> node
var t = document.createTextNode("This is a paragraph."); // Create a text node
x.appendChild(t); // Append the text to <p>
document.body.appendChild(x); // Append <p> to <body>
亲自试一试 »
相关页面
HTML DOM 参考手册: element.hasChildNodes() 方法
HTML DOM 参考手册: element.insertBefore() 方法
HTML DOM 参考手册: element.removeChild() 方法
HTML DOM 参考手册: element.replaceChild() 方法
HTML DOM 参考手册: document.createElement() 方法
HTML DOM 参考手册: document.createTextNode() 方法
HTML DOM 参考手册: document.adoptNode() 方法
HTML DOM 参考手册: document.importNode() 方法
