HTML DOM Element replaceChild() method

Definition and usage

replaceChild() Method uses new node to replace child node.

also see:

removeChild() method

remove() method

appendChild() method

insertBefore() method

childNodes attribute

firstChild attribute

lastChild attribute

firstElementChild attribute

lastElementChild attribute

related document methods:

createElement() method

createTextNode() method

tasi

mafiya 1

Girmiwarin new text node doni <li> elementiwa text node:

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

替换之前：

  • Coffee
  • Tea
  • Milk

替换之后：

  • Water
  • Tea
  • Milk

亲自试一试

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