节点:replaceChild() 方法
replaceChild()
方法是 Node
接口的一种方法,用于替换给定(父)节点内的子节点。
语法
js
replaceChild(newChild, oldChild)
参数
注意:参数顺序,new 在 old 之前,很不寻常。 Element.replaceWith()
仅适用于作为元素的节点,可能更容易阅读和使用。
返回值
被替换的 Node
。它与 oldChild
是同一个节点。
异常
HierarchyRequestError
DOMException
-
当违反 DOM 树的约束时抛出,即当出现以下情况之一时
- 如果
oldChild
的父节点不是Document
、DocumentFragment
或Element
。 - 如果用
newChild
替换oldChild
会导致循环,即如果newChild
是节点的祖先。 - 如果
newChild
不是DocumentFragment
、DocumentType
、Element
或CharacterData
。 - 如果当前节点是
Text
,且其父节点是Document
。 - 如果当前节点是
DocumentType
且其父节点不是Document
,因为doctype 始终应该是document 的直接子节点。 - 如果节点的父节点是
Document
且newChild
是一个DocumentFragment
,其中包含多个Element
子节点,或者具有一个Text
子节点。 - 如果用
newChild
替换oldChild
会导致Document
具有多个Element
作为子节点。 - 如果用
newChild
替换oldChild
会导致Element
节点出现在DocumentType
节点之前。
- 如果
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 表格仅在浏览器中加载