码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM 元素 replaceChild()

❮上一节 ❮ 元素对象参考 下一节❯

示例

将 <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
亲自试一试 »

下面有更多示例。

描述

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

也可以看看：

removeChild() 方法

移除()方法

appendChild() 方法

insertBefore() 方法

childNodes 属性

第一个子属性

最后一个子属性

firstElementChild 属性

LastElementChild 属性

相关文档方法：

createElement() 方法

createTextNode() 方法

语法

node.replaceChild( newnode, oldnode)

参数

Parameter Description
newnode Required.
The node to insert.
oldnode Required.
The node to remove.

返回值

类型 描述
节点 被替换的节点。

更多示例

示例

将 <li> 元素替换为新的 <li> 元素：

// Create a new <li> element:
const element = document.createElement("li");

// Create a new text node:
const textNode = document.createTextNode("Water");

// Append the text node to the <li> element:
element.appendChild(textNode);

// Get the <ul> element with id="myList":
const list = document.getElementById("myList");

// Replace the first child node with the new <li> element:
list.replaceChild(element, list.childNodes[0]);

前：

  • Coffee
  • Tea
  • Milk

后：

  • Water
  • Tea
  • Milk
亲自试一试 »

浏览器支持

element.replaceChild()是 DOM Level 1 (1998) 功能。

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

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11
❮上一节 ❮ 元素对象参考 下一节❯