Javascript中outerHTML、innerHTML和innerText区别详解-自学php网

来源：自学PHP网时间：2014-09-19 14:47 作者：阅读:次

[导读] 在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道了。...

示例代码：

代码如下	复制代码
<div id="test"> <span style="color:red">test1</span> test2 </div>

在JS中可以使用：

代码如下	复制代码
document.getElementById('test').innerHTML:

也就是从test对象的起始位置到终止位置的全部内容,包括其内部的Html标签。

上例中的返回值：<span style="color:red">test1</span> test2

代码如下	复制代码
document.getElementById('test').innerText:

(注：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> <SPAN id="ad_11" style="visibility:hidden;"> <script language="JavaScript" src="/js/ad_1.js"></script> </SPAN> <SCRIPT>document.getElementById("ad_1").innerHTML=document.getElementById("ad_11").innerHTML;document.getElementById("ad_11").innerHTML="";</SCRIPT>

不要直接使用DIV或SPAN的id，而是通过 document.getElementById("div_id") 来执行替换即可。另外，Firefox是不支持 innerTEXT 属性的。

更多文章推荐