innerHTML、innerText和outerHTML、outerText的区别

dhl004

浏览: 53318 次
性别:
来自: 大连

最近访客更多访客>>

change37

ieye2014

jmcwh2007

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

html javascript

(转)innerHTML、innerText和outerHTML、outerText的区别
.1、区别描述如下：

•innerHTML 设置或获取位于对象起始和结束标签内的 HTML
•outerHTML 设置或获取对象及其内容的 HTML 形式
•innerText 设置或获取位于对象起始和结束标签内的文本
•outerText 设置(包括标签)或获取(不包括标签)对象的文本

innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。

2、示例代码

Html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　test_id1.innerHTML="设置或获取位于对象起始和结束标签内的 HTML.";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　test_id2.innerText="设置或获取位于对象起始和结束标签内的文本.";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　test_id3.outerHTML="设置或获取对象及其内容的 HTML 形式.";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　test_id4.outerText=" 设置(包括标签)或获取(不包括标签)对象的文本.";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>
3、不同之处:　
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。
对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：