HTML DOM 元素 replaceChild()
示例
用新的文本节点替换 <li> 元素中的文本节点
const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);
描述
The replaceChild() 方法用新的节点替换子节点。
另请参阅
相关文档方法
语法
node.replaceChild(newnode, oldnode)
参数
| 参数 | 描述 |
| newnode | 必需的。 要插入的节点。 |
| oldnode | 必需的。 要移除的节点。 |
返回值
| 类型 | 描述 |
| 节点 | 被替换的节点。 |
更多示例
示例
用新的 <li> 元素替换 <li> 元素
// 创建一个新的 <li> 元素
const element = document.createElement("li");
// 创建一个新的文本节点
const textNode = document.createTextNode("Water");
// 将文本节点追加到 <li> 元素
element.appendChild(textNode);
// 获取 id 为 "myList" 的 <ul> 元素
const list = document.getElementById("myList");
// 用新的 <li> 元素替换第一个子节点
list.replaceChild(element, list.childNodes[0]);
之前
- Coffee
- Tea
- Milk
之后
- Water
- Tea
- Milk
浏览器支持
element.replaceChild() 是 DOM Level 1 (1998) 的功能。
它在所有浏览器中都得到了完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
