HTML DOM replaceChild() 方法
实例
用一个新项目替换列表中的某个项目:
// Create a new text node called "Water"
var textnode = document.createTextNode("Water");
// Get the first child node of an <ul> element
var item = document.getElementById("myList").childNodes[0];
// Replace the first child node of <ul> with the newly created text node
item.replaceChild(textnode, item.childNodes[0]);
// 注释: This example replaces only the Text node "Coffee" with a Text node "Water"
var textnode = document.createTextNode("Water");
// Get the first child node of an <ul> element
var item = document.getElementById("myList").childNodes[0];
// Replace the first child node of <ul> with the newly created text node
item.replaceChild(textnode, item.childNodes[0]);
// 注释: This example replaces only the Text node "Coffee" with a Text node "Water"
替换之前:
- Coffee
- Tea
- Milk
替换之后:
- Water
- Tea
- Milk
页面下方有更多实例。
定义和用法
replaceChild() 方法用新节点替换某个子节点。
这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。
提示: 使用 removeChild() 方法从元素中删除子节点。
浏览器支持
| 方法 | |||||
|---|---|---|---|---|---|
| replaceChild() | Yes | Yes | Yes | Yes | Yes |
语法
node.replaceChild(newnode, oldnode)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| newnode | Node object | 必需。要插入的节点对象 |
| oldnode | Node object | 必需。要删除的节点对象 |
技术细节
| 返回值: | Node 节点对象，表示替换的节点 |
|---|---|
| DOM 版本 | Core Level 1 Node Object |
更多实例
实例
用新的 <li> 元素替换列表中的 <li> 元素:
// Create a new <li> element
var elmnt = document.createElement("li");
// Create a new text node called "Water"
var textnode = document.createTextNode("Water");
// Append the text node to <li>
elmnt.appendChild(textnode);
// Get the <ul> element with id="myList"
var item = document.getElementById("myList");
// Replace the first child node (<li> with index 0) in <ul> with the newly created <li> element
item.replaceChild(elmnt, item.childNodes[0]);
// 注释: This example replaces the entire <li> element
var elmnt = document.createElement("li");
// Create a new text node called "Water"
var textnode = document.createTextNode("Water");
// Append the text node to <li>
elmnt.appendChild(textnode);
// Get the <ul> element with id="myList"
var item = document.getElementById("myList");
// Replace the first child node (<li> with index 0) in <ul> with the newly created <li> element
item.replaceChild(elmnt, item.childNodes[0]);
// 注释: This example replaces the entire <li> element
移除前:
- Coffee
- Tea
- Milk
移除后:
- Water
- Tea
- Milk
