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>
规范
Specification |
---|
DOM Standard # dom-node-replacechild |
浏览器兼容性
BCD tables only load in the browser