获取值时:
(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标签