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 支持 支持 支持 支持