innerHTML、innerText和outerHTML、outerText的区别 -

bijian1013

浏览: 3239235 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

innerHTML、innerText和outerHTML、outerText的区别

博客分类：

JavaScript

javaScript innerHTML innerText outerHTML outerText

1.区别描述如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

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

2.示例代码

<!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="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>"; 
　　} 
　　//.innerText
　　function innerTextDemo()
　　{ 
　　　test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>"; 
　　} 
　　//.outerHTML
　　function outerHTMLDemo()
　　{ 
　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　}
　　//.outerText
　　function outerTextDemo()
　　{ 
　　　test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>"; 
　　}
　　</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的不同之处在于：

a.innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

b.在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

c.对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：

实例2：

<!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>Insert title here</title>
</head>
<body>
	<!--第一段-->
	<p id=p1 onmouseover="this.innerText='<l>innerText与innerHTML之区别</l>'" onmouseout="this.innerHTML='<l>innerText与innerHTML之区别</l>'">
		innerText与innerHTML之区别
	</p>
	
	<!-- 第二段 -->
	<p id=p3><l>abc</l></p>
	
	<input type=button value="innerText" onclick="alert(p3.innerText)">
	<input type=button value="innerHTML" onclick="alert(p3.innerHTML)">
	<input type=button value="outerText" onclick="alert(p3.outerText)">
	<input type=button value="outerHTML" onclick="alert(p3.outerHTML)">
</body>
<script type="text/javascript>
	
</script>
</html>

运行结果：

刚打开页面：

将鼠标移至第一行上面时，效果如下：