js中innerHTML、innerText、outerHTML、outerText区别

来源:互联网 发布:战国之道网络连接失败 编辑:程序博客网 时间:2024/06/06 04:02

innerHtml、innerText与outerHtml三者的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML、innerText与outerHTML的区别</title>
</head>
<body>
<div id="test">
<span style="color:#FF6600">test1</span>
<span style="color:#FF0000">test2</span>
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">innerText内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
<a href="javascript:alert(test.outerText)">outerHTML内容</a>
</body>
</html>
在JS中可以使用:

test.innerHTML:
  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
  上例中"innerHTML内容"的值也就是
<span style="color:#FF6600">test1</span><span style="color:#FF0000">test2</span>


test.innerText:
  从起始位置到终止位置的内容, 但它去除Html标签
  上例中"innerText内容"的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:
  除了包含innerHTML的全部内容外, 还包含对象标签本身。
  上例中的"outerHTML内容"的值也就是
<div id="test">
<span style="color:#FF6600">test1</span>
<span style="color:#FF0000">test2</span>
</div>

test.outerText:
返回的也是 "test1 test2"


 

转自:http://liminhappygirl.iteye.com/blog/1196332

原创粉丝点击