Node.replaceChild() - Web API 接口参考 编辑

Node.replaceChild() 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

语法

parentNode.replaceChild(newChild, oldChild);

参数

newChild

用来替换 oldChild 的新节点。如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除。

oldChild

被替换掉的原始节点。

返回值

The returned value is the replaced node. This is the same node as oldChild.

例子

// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// 创建一个空的span元素节点
// 没有id,没有任何属性和内容
var sp1 = document.createElement("span");

// 添加一个id属性,值为'newSpan'
sp1.setAttribute("id", "newSpan");

// 创建一个文本节点
var sp1_content = document.createTextNode("新的span元素的内容.");

// 将文本节点插入到span元素中
sp1.appendChild(sp1_content);

// 获得被替换节点和其父节点的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// 用新的span元素sp1来替换掉sp2
parentDiv.replaceChild(sp1, sp2);

// 结果:
// <div>
//   <span id="newSpan">新的span元素的内容.</span>
// </div>

规范

规范	状态	备注
DOM Node: replaceChild	Living Standard

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• Node.removeChild
• ChildNode.replaceWith