HTML DOM 元素 replaceChild()
示例
用新的文字節點替換 <li> 元素中的文字節點
const newNode = document.createTextNode("Water");（新建文字節點 "Water"）
const element = document.getElementById("myList").children[0];（獲取id為"myList"的ul元素的第一個子元素）
element.replaceChild(newNode, element.childNodes[0]);（將第一個子元素中的第一個子節點（文字節點）替換為新的文字節點）
描述
replaceChild() 方法用一個新的節點替換一個子節點。
另請參閱
相關文件方法
語法
node.replaceChild(newnode, oldnode)
引數
| 引數 | 描述 |
| newnode | 必需。 要插入的節點。 |
| oldnode | 必需。 要刪除的節點。 |
返回值
| 型別 | 描述 |
| 節點 | 被替換的節點。 |
更多示例
示例
用新的 <li> 元素替換一個 <li> 元素
// 建立一個新的 <li> 元素
const element = document.createElement("li");（建立一個新的 <li> 元素）
// 建立一個新的文字節點
const textNode = document.createTextNode("Water");（建立一個新的文字節點 "Water"）
// 將文字節點附加到 <li> 元素
element.appendChild(textNode);（將文字節點附加到 <li> 元素）
// 獲取 id 為 "myList" 的 <ul> 元素
const list = document.getElementById("myList");
// 用新的 <li> 元素替換第一個子節點
list.replaceChild(element, list.childNodes[0]);（將列表的第一個子節點替換為新的 <li> 元素）
之前
- 咖啡
- 茶
- 牛奶
之後
- Water
- 茶
- 牛奶
瀏覽器支援
element.replaceChild() 是 DOM Level 1 (1998) 的功能。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
