HTML DOM Element replaceChild() 方法

定义和用法

replaceChild() 方法用新节点替换子节点。

另请参阅：

removeChild() 方法

remove() 方法

appendChild() 方法

insertBefore() 方法

childNodes 属性

firstChild 属性

lastChild 属性

firstElementChild 属性

lastElementChild 属性

相关的文档方法：

createElement() 方法

createTextNode() 方法

实例

例子 1

用新的文本节点替换 <li> 元素中的文本节点：

const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];

element.replaceChild(newNode, element.childNodes[0]);

亲自试一试

例子 2

用新的 <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]);

亲自试一试

语法

node.replaceChild(newnode, oldnode)

参数

返回值

浏览器支持

element.replaceChild() 是 DOM Level 1 (1998) 特性。

所有浏览器都完全支持它：