Node.replaceChild()

翻译不完整。 请帮助我们翻译这篇文章!

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
replaceChildChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

参见