让 FireFox 也支持 outerHTML

本文转载自博客园http://www.cnblogs.com/doll-net/archive/2007/06/17/786835.html
我们用innerHTML以及innerText比较多，使用outerHTML可能比较少，outerHTML和innerHTML以及innerText的区别就用下面的例子说明下吧：

<div id="test">
   <span>innerHTML,innerText,outerHTML</span>
</div>
<script>
alert(document.getElementById("test").innerHTML); // output  : <span>innerHTML,innerText,outerHTML</span>
alert(document.getElementById("test").innerText); //output : innerHTML,innerText,outerHTML
alert(document.getElementById("test").outerHTML); //output : <div id="test"><span>innerHTML,innerText,outerHTML</span></div>
</script>

上面的代码在里会正确得出结果，但在FireFox里就不行了，因为outerHTML不是W3C的标准属性，网上找了下使用DOM原型扩展方法解决，代码如下：

if(typeof(HTMLElement)!="undefined" && !window.opera) 
{ 
    HTMLElement.prototype.__defineGetter__("outerHTML",function() 
    { 
        var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++) 
        if(a[i].specified) 
            str+=" "+a[i].name+'="'+a[i].value+'"'; 
        if(!this.canHaveChildren) 
            return str+" />"; 
        return str+">"+this.innerHTML+"</"+this.tagName+">"; 
    }); 
    HTMLElement.prototype.__defineSetter__("outerHTML",function(s) 
    { 
        var r = this.ownerDocument.createRange(); 
        r.setStartBefore(this); 
        var df = r.createContextualFragment(s); 
        this.parentNode.replaceChild(df, this); 
        return s; 
    }); 
    HTMLElement.prototype.__defineGetter__("canHaveChildren",function() 
    { 
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase()); 
    }); 
} 

最近要实现的功能要考虑IE和FireFox的兼容性，深受其苦。