[color=red]本文转载自博客园[url]http://www.cnblogs.com/doll-net/archive/2007/06/17/786835.html[/url][/color]
我们用innerHTML以及innerText比较多,使用outerHTML可能比较少,outerHTML和innerHTML以及innerText的区别就用下面的例子说明下吧:
上面的代码在里会正确得出结果,但在FireFox里就不行了,因为outerHTML不是W3C的标准属性,网上找了下使用DOM原型扩展方法解决,代码如下:
最近要实现的功能要考虑IE和FireFox的兼容性,深受其苦。
我们用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的兼容性,深受其苦。