让 FireFox 也支持 outerHTML

我们用innerHTML以及innerText比较多，使用outerHTML可能比较少，outerHTML和innerHTML以及innerText的区别就用下面的例子说明下吧：

< div id = " test " >
    < span > innerHTML,innerText,outerHTML </ span >
</ div >

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>

上面的代码在里会正确得出结果，但在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的兼容性，深受其苦。