快捷搜索:

javascript 替换节点

这可能是最被轻忽的文档操作之一,这都怪微软的不作为与W3C的无能,搞到大年夜家只知道appendChild与insertBefore。后来爆出 appendChild在IE有bug,好了,今后只用insertBefore了。现在jQuery兴起后,无数赶鸭子上架的javascript素人连基础API也不学了,直接上手append, preppend, before, after与replaceWith,这对照伤心……好了,我们先来看w3c的调换节点措施吧。

replacedNode = parentNode.replaceChild(newChild, oldChild)。从公式中我们可以看出科学家与工程师亽差别,为了履行它,必要三个节点进行介入,并且返回的是被调换的元素,这晦气于链式操作。好处是适用性广,支持XML与HTML。

var $ = function(id){

return document.getElementById(id)

}

var replace = function(){

var ul =$("ul"),

lis = ul.innerHTML,

ol = document.createElement("ol");

ul.parentNode.replaceChild(ol,ul);

ol.innerHTML = lis;

replace = function(){}//只容许履行一次

}

Ruby Louvre

调换节点

运行代码

总结:以上例子的需求对照掉常,都是限制要调换某一节点却不调换它的子节点,假如不斟酌其子节点,就方便多。为了效率,我们建议IE用 replaceNode,火狐用replaceChild,其他标准浏览器用outerHTML,我们可以把它们封装为一个函数。至于为什么不用 innerHTML,好问题,由于要调换的节点可能存在兄弟节点。

您可能还会对下面的文章感兴趣: