innerHTML、innerText和outerHTML的区别

获取值时：

（1）outerHTML属性：从对象的起始位置到终止位置的全部内容，包括HTML标签和本身

（2）innerHTML 属性：从对象的起始位置到终止位置的全部内容，包括Html标签

（3）innerText属性：从起始位置到终止位置的内容，不包括Html标签

实例：

<div id="test">
   <span>张三</span>
</div>

在js中：

（1）document.getElementById('test').outerHTML;     // 结果为<div id="test"><span>test1</span></div>

（2）document.getElementById('test').innerHTML;     // 结果为<span>test1</span>

（3）document.getElementById('test').innerText;         // 结果为test1

设置值时：

innerText会把html标签当做普通的文本显示，而innerHTML和 outerHTML则不会

在js中：

（1）document.getElementById('test').outerHTML = "李四<br>王五";

（2）document.getElementById('test').innerHTML= "李四<br>王五";

// 结果均为：

李四

王五

（3）document.getElementById('test').innerText= "李四<br>王五";

// 结果为：

李四<br>王五

兼容性：

（1）outerHTML属性：Firefox浏览器支持

（2）innerHTML 属性：符合W3C标准的属性，所有主要浏览器都支持

（3）innerText属性：只适用于IE浏览器（现在也适应chrome浏览器）

总结：

如果只想获取标签中的文本内容，由于兼容性问题，建议先用innerHTML属性获取，再用正则表达式去除HTML标签