这可能是最被忽略的文档操作之一，这都怪微软的不作为与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(){}//只允许执行一次
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>替换节点 by 司徒正美 </title>
<script type="text/javascript">
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(){}//只允许执行一次
}
</script>
</head>
<body>
<ul id="ul" >
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
<button type="button" onclick = "replace()" >替换节点</button>
</body>
</html>
运行代码
oReplace = object.replaceNode(oNewNode)。微软的私有实现，不过只支持HTML。好处是只用到两个节点。
