兼容outerHTML

 

obj.innerHTML  经常用到 

obj.outerHTML包括元素本身  很少用  今天看到一个可以兼容firefox 的方法  

如：

 

<ul id="a">

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

</ul>

 

alert(document.getElementById("a").outerHTML);

输出：

“

<ul id="a">

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

</ul>

”

 

alert(document.getElementById("a").innerHTML);

 

输出：

“

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

<li>addsd</li>

”

下面的用来兼容firefox

 

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()); 

    }); 

}

 

 

参考：http://www.cnblogs.com/doll-net/archive/2007/06/17/786835.html