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]);

替换之前：

  • Coffee
  • Tea
  • Milk

替换之后：

  • Water
  • Tea
  • Milk

亲自试一试

例子 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]);

替换之前：

  • Coffee
  • Tea
  • Milk

替换之后：

  • Water
  • Tea
  • Milk

亲自试一试

语法

node.replaceChild(newnode, oldnode)

参数

参数 描述
newnode 必需。要插入的节点。
oldnode 必需。要删除的节点。

返回值

类型 描述
Node 对象 被替换的节点。

浏览器支持

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

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持