节点:replaceChild() 方法

replaceChild() 方法是 Node 接口的一种方法,用于替换给定(父)节点内的子节点。

语法

js
replaceChild(newChild, oldChild)

参数

newChild

要替换 oldChild 的新节点。

警告:如果新节点已存在于 DOM 中的其它位置,则首先会从该位置删除它。

oldChild

要替换的子节点。

注意:参数顺序,newold 之前,很不寻常。 Element.replaceWith() 仅适用于作为元素的节点,可能更容易阅读和使用。

返回值

被替换的 Node。它与 oldChild 是同一个节点。

异常

HierarchyRequestError DOMException

当违反 DOM 树的约束时抛出,即当出现以下情况之一时

NotFoundError DOMException

如果 oldChild 的父节点不是当前节点,则抛出此异常。

示例

js
// Given:
// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// Create an empty element node
// without an ID, any attributes, or any content
const sp1 = document.createElement("span");

// Give it an id attribute called 'newSpan'
sp1.id = "newSpan";

// Create some content for the new element.
const sp1_content = document.createTextNode("new replacement span element.");

// Apply that content to the new element
sp1.appendChild(sp1_content);

// Build a reference to the existing node to be replaced
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;

// Replace existing node sp2 with the new span element sp1
parentDiv.replaceChild(sp1, sp2);

// Result:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div>

规范

规范
DOM 标准
# dom-node-replacechild

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见