js中innerHTML、innerText、outerHTML的用法与区别

来源:互联网 发布:二胡曲 知乎 编辑:程序博客网 时间:2024/06/11 01:14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>测试 innerHTML innerText  outerHTML</title>
</head>
<body>

<!-- 

 innerHTML:以id="test"节点的所有子节点内容。
 
 innerText:以id="test"节点的所有子节点内容中的 文本节点。注:只有ie支持,所以很少用。
  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,
如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除
 
 outerHTML:包括id="test"节点以及其所有子节点内容


-->
<div id="test">
    <span style="color:red">测试1</span> 测试2
</div>


<a href="javascript:alert(document.getElementById('test').innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">innerHTML内容</a>
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">innerHTML内容 正则表达式</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>


</body>
</html>
0 0
原创粉丝点击