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