Javascript中outerHTML、innerHTML和innerText区别详解
示例代码:
代码如下 | |
<div id="test"> |
在JS中可以使用:
代码如下 | |
document.getElementById('test').innerHTML: |
也就是从test对象的起始位置到终止位置的全部内容,包括其内部的Html标签。
上例中的返回值:<span style="color:red">test1</span> test2
代码如下 | |
|
(注:innertext只适用于ie浏览器,所以尽量不要使用innertext)
从起始位置到终止位置的内容, 但它会去除Html标签。
上例中的返回值:test1 test2, 其中span标签被去除了。
代码如下 | |
document.getElementById('test').outerHTML: |
除了包含innerHTML的全部内容外, 还包含匹配对象标签本身。
上例中的返回值:<div id="test"><span style="color:red">test1</span> test2</div>
Firefox不支持Js的InnerHtml
原来的代码如下:
代码如下 | |
<span id="ad_1"></span> <SPAN id="ad_11" style="visibility:hidden;"> <script language="JavaScript" src="/js/ad_1.js"></script> </SPAN> <SCRIPT>ad_1.innerHTML=ad_11.innerHTML;ad_11.innerHTML="";</SCRIPT> |
上面的代码在IE、chrome等浏览器下可以被正确的执行替换,而在Firefox下就不能。其实解决方法也很简单,就让我们按照ECMAScript规范写代码即可。上面的代码修正为下面的即可:
代码如下 | |
<span id="ad_1"></span> |
不要直接使用DIV或SPAN的id,而是通过 document.getElementById("div_id") 来执行替换即可。另外,Firefox是不支持 innerTEXT 属性的。