innerHTML，innerText，outerHTML

最新推荐文章于 2022-12-20 20:27:03 发布

Cherry728

最新推荐文章于 2022-12-20 20:27:03 发布

阅读量813

点赞数

分类专栏： javascript

javascript 专栏收录该内容

11 篇文章

订阅专栏

<div id="test">
   <span style="color:red">test1</span> test2
</div>

innerHTML

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

上面代码中的test.innerHTML的值也就是“<span style="color:red">test1< /span> test2 ”

innerText:

　　从起始位置到终止位置的内容, 但它去除Html标签

　上例中的text.innerText的值是“test1 test2”, 其中span标签去除了。

outerHTML:

　　除了包含innerHTML的全部内容外, 还包含对象标签本身。

　　上例中的text.outerHTML的值也就是<div id="test">< span style="color:red">test1</span> test2</div>

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器。因此，尽可能地去使用innerHTML，而少用innerText。如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

FF不支持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 属性的。

但是，FF下有个textContent属性。

但是实际上，这里有个误解。网上很多文章说“FF下等效于innerText属性的属性是textContent”——但是事实上并非如此。innerText与textContent有几点很重要的不同，导致它们在一些情况下不能直接互换使用。

IE中的innerText是需要对innerHTML的值进行：
1、HTML转义（等同于XML转义，对<、&等转义字符进行处理）；
2、经过HTML解释和CSS样式解释（<br/>会起作用，换行当作空格）；
3、之后又剔除格式信息之后留下的纯文本。
而FF中的textContent没有2、3步，在经过了HTML转义之后直接剔除所有html标签后得到的纯文本。

<div id=”T1″> 
ABCD 
EFG HIJ<br/>KLM  N 
OPQ<div>RS</div>T 
T 
<div>

在IE中的innerText属性的值为：

ABCD EFG HIJ
KLM N OPQ
RS
T T

而在FF中的textContent的属性的值为：

(这里有个换行)
ABCD
EFG HIJKLM N
OPQRST
T