innerText

通过innerText属性可以操作元素中包含的所有文本内容，无论文本位于子文档树中的什么位置。在通过innerText读取值是，它会按照由浅入深的顺序，将子文档树中所有文本拼接起来。以下面的HTML代码为例：

<div id="mydiv">
  <p>This is a <strong>paragraph</strong> with a list following it.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

对于这个例子中的<div>元素而言，其innerText属性会返回下列字符串：

This is a paragraph with a list following it.
Item 1
Item 2
Item 3

由于不同浏览器处理空白符的方式不同，因此输出的文本可能会不会包含原始HTML代码中的缩进。

使用innerText属性设置这个<div>元素的内容，则只需一行代码：

div.innerText = "Hello world!"

执行这行代码后，页面的HTML代码就会变成如下所示：

<div id="mydiv">Hello world!</div>

可见，设置innerText属性除了先前存在的所有子节点，完全改变了子树。此外，通过设置innerText属性还可以对所有出现在文本中的HTML语法字符进（小于号、大于号引号及和号）行编码。例如，下面的这行代码：

div.innerText = "Hello & welcome, <b>\"reader\"!</b>";

运行之后的结果如下：

<div id="mydiv">Hello &amp; welcome, &lt;b&gt;\&quot;reader\&quot;!&lt;/b&gt;</div>

设置innerText永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，就必须要对文本进行编码。此外，还可以利用innerText属性过滤HTML标签。方法是将innerText设置为等于innerText，这样就可以去掉所有HTML标签，如下所示：

div.innerText = div.innerText;

执行这行代码的结果就是用原来的文本替换容器元素中的所有内容。

IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText，但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性，而且也得到了safari、opera和Chrome的支持。为了确保跨浏览器兼容，有必要想下面这样通过函数来检测可以使用哪个属性：

var div = document.getElementById("mydiv");
function getInnerText(element) {
    return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
    if (typeof element.textContent == "string") {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!""

这两个函数都接受一个元素，然后检查这个元素是不是有textContent属性。如果有，那么typeof element.textContent应该是“string”；如果没有，那么这两个函数就会改为使用innerText。

使用这两个函数可以确保在不同的浏览器中使用正确的属性。