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