innerText、innerHTML、outerText和outerHTML如何使用

       

This is aparagraph with a list following it.

       

       
• ltem l

       
• ltem 2

       
• ltem 3

       

元素而言，其innerText属性会返回下列字符串：
       This is a paragraph with a list following it.
       Item l
       Item 2
       Item 3
       由于不同浏览器处理空白符的方式不同，因此输出的文本可能会也可能不会包含原始HTML代码中的缩进。
使用innerText属性设置这个
       设置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代码为例：