Node.replaceChild()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Node.replaceChild() 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
语法
js
replaceChild(newChild, oldChild)
参数
返回值
返回值为被替换的节点，与 oldChild 为同一个节点。
示例
js
// <div>
// <span id="childSpan">foo bar</span>
// </div>
// 创建一个空的 span 元素节点
// 没有 id，没有任何属性和内容
const sp1 = document.createElement("span");
// 添加一个 id 属性，值为 'newSpan'
sp1.setAttribute("id", "newSpan");
// 创建一个文本节点
const sp1_content = document.createTextNode("新的 span 元素的内容。");
// 将文本节点插入到 span 元素中
sp1.appendChild(sp1_content);
// 获得被替换节点和其父节点的引用。
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;
// 用新的 span 元素 sp1 来替换掉 sp2
parentDiv.replaceChild(sp1, sp2);
// 结果：
// <div>
// <span id="newSpan">新的 span 元素的内容。</span>
// </div>
规范
| Specification |
|---|
| DOM # dom-node-replacechild |