innerHTML outerHTML innerText textContent的区别

在网上看了很多博文介绍他们之间的区别，大部分都说FF中innerText不能使用，但经过自己试验，是可以用的，所以自己把各种情况总结了一下。

首先是innerHTML，这个就不用多说了，返回的是标签内部所有的内容，包括标签和文本，还有空格

举两个栗子，对比一下空格导致的输出区别

<div id="main">1
<span>123</span>
<p>222</p>
<div class="test">456
</div>
</div>

这里去除id为main的标签中的innerHTML，结果如上图，可以看到标签之间的空格也输出了。

<div id="main">1<span>123</span><p>222</p><div class="test">456</div></div>

假如代码是这样的，结果就是下边这样



那么outerHTML是什么呢？其实就是包含了目标标签，结果是这样


好了，下边就来说一下innerText和textContent的区别。

innerText（兼容所有浏览器 这里ff和chrome都是最新）

<div id="main">1
<div>123</div><p>222</p><p class="test">456</p>
<span>123</span>    <span>222</span>            <span class="test">456</span>
</div>

浏览器：FireFox

浏览器：chrome

左边是页面显示，右边是控制台输出的innerText，可以看到，窗口的内容和控制台输出基本是一样的，标签之间的空格也被输出。

不过浏览器之间还是有区别的，chrome中的第一个p标签的上方相比firefox中少了一个空行。


ie9

ie8

IE9中的输出和FF中是一样的，而IE8及以下版本只有换行的效果，看到这里就醉醉得了吧。

textContent（ie8及以下不能使用 最新的ff和chrome都可使用）

textContent相对innerText就要简单很多，它没有考虑标签之间的关系，相较于纯粹的输出文本，它只是将代码中文本之间的空格给输出了。

还是同样的代码

<div id="main">1
<div>123</div><p>222</p><p class="test">456</p>
<span>123</span>  <span>222</span>           <span class="test">456</span>
</div>

FF：


chrome:


ie9及以上：


对于textContent，浏览器之间就没什么区别了。只是ie上版本问题需要考虑。