本文小编为大家详细介绍“innerText、innerHTML、outerText和outerHTML如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“innerText、innerHTML、outerText和outerHTML如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
This is aparagraph with a list following it.
元素而言，其innerText属性会返回下列字符串：
This is a paragraph with a list following it.
Item l
Item 2
Item 3
由于不同浏览器处理空白符的方式不同，因此输出的文本可能会也可能不会包含原始HTML代码中的缩进。
使用innerText属性设置这个
元素的内容，则只需一行代码：
div.innerText="Hello world!；
执行这行代码后，页面的HTML代码就会变成如下所示：
Hello world!
可见，设置innerText属性移除了先前存在的所有子节点，完全改变了DOM子树。此外，通过设置innerText属性还可以对所有出现在文本中的HTML语法字符（小于号、大干号、引号及和号）进行编码。例如，下面的这行代码：
div.innerText="Hello＆welcome,
"reader"！"；
运行之后的结果如下：
< div id=‘’content">Hello & welcome,<b>" reader"！< /b>
设置innerText永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点， 就必须要对文本进行HTML编码。此外，还可利用innerText属性过滤掉HTML标签。方法是将 innerText设置为等于innerText，这样就可以去掉所有HTML标签，如下所示：
div.innerText=div.innerText:
执行这行代码的结果就是用原来的文本替换容器元素中的所有内容。IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText，但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性，而且也得到了Safari、Opera 和Chrome的支持。为了确保跨浏览器兼容，有必要像下面这样通过函数来检测可以使用哪个属性：
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:
}
}
这两个函数都接受一个元素，然后检查这个元素是不是有textContent属性。如果有，那么type of element．textContent应该是"string"；如果没有，那么这两个函数就会改为使用innerText，可以像下面这样调用这两个函数：
setInnerText( div, "Hello worldl“);
alert( getinnerText (div)); //"Hello world!"
使用这两个函数可以确保在不同的浏览器中使用正确的属性。
2．innerHTML属性 innerHTML与innerText在很多方面都很相似。在读取信息时，innerHTML返回当前元素所有子节点的HTML表现，包括元素、注释及文本节点。在写入信息时，innerHTML会按照指定的值创建新的DOM子树，并以该子树替换当前元素的所有子节点。提到innerHTML与innerText之间最 主要的区别，无非就是innerHTML处理的是HTML字符串，而innerText处理的是普通文本字符串。
以下面的HTML代码为例：
This is aparagraph with a list following it.
< /div>
这里面
元素的innerHTML属性将返回下列字符串：
This is aparagraph with a list following it.
在不同浏览器中，innerHTML返回的文本可能会有所不同。IE和Opera常常把所有标签转换为大写，而Safari、Chrome和Firefox则以文档中指定的形式返回HTML-包括空格和缩进。不要指望所有浏览器都会返回没有丝毫差别的innerHTML值。
在写入信息时，innerHTML会将给定的字符串解析为DOM子树，并用这个子树替换所有的子节 点。由于赋给innerHTML的字符串会被当作HTML，因此其中包含的所有标签都会按照浏览器处理 HTML的标准方式，被转换成对应的元素（同样，这个过程也会因浏览器而异）。如果像下面这样， 只设置简单的文本，那么结果就如同设置innerText -样：
div.innerHTML="Hello world!"：
如果为innerHTML设置的字符串中包含HTML代码，结果可能就会大不一样了。区别就在于innerText会转义HTML语法字符，而innerHTML会解析它们。来看下面的例子：
div.innerHTML="Hello＆welcome,
＼"reader"！"；
执行这行代码之后的结果是：
Hello & welcome, " reader"!
在设置完innerHTML之后，马上就可以像访问文档中的其他节点一样访问新生成的节点。
设置innerHTML会导致浏览器将HTML字符串解析为对应的DOM树。换句话说，设置完innerHTML之后再读取它，将会得到一个差别很大的字符串。这个字符串不再是原始的
HTML代码，而是根据原始HTML字符串创建的DOM子树经过序列化之后的结果。
innerHTML也有一些限制。首先，在多数浏览器中，通过innerHTML插入的
重庆分公司
重庆分公司