javascript innerHTML、outerHTML、innerText、outerText的区别

原创 2013年12月04日 10:20:23

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

 

<html> 
<head> 
<title>Demo</title> 
<style><!-- 
body {font-family:"宋体";color="blue";font-size="9pt"} 
--> </style> 
<script language="JavaScript"> 
//.innerHTML 
function innerHTMLDemo() 
{ 
	alert(test_id1.innerHTML);
	test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>"; 
} 
//.innerText 
function innerTextDemo() 
{ 
	alert(test_id2.innerText);
	test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>"; 
} 
//.outerHTML 
function outerHTMLDemo() 
{ 
	alert(test_id3.outerHTML);
//设置完之后事件也被覆盖了
	test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>"; 
} 
//.outerText 
function outerTextDemo() 
{ 
	alert(test_id4.outerText);
//设置完之后事件也被覆盖了
	test_id4.outerText="<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的不同之处在于: 

1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。 

2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。 

特别说明: 

  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例: 

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

 

  • af72c9ee-aa81-304a-972a-52b8eab3dda3-thumb.jpg
  • 大小: 11.2 KB

javascript innerHTML、outerHTML、innerText、outerText的区别

1、功能讲解:  innerHTML 设置或获取位于对象起始和结束标签内的 HTML  outerHTML 设置或获取对象及其内容的 HTML 形式  innerText 设置或获取位于对象起始...
  • wugouzi
  • wugouzi
  • 2013年07月18日 23:00
  • 618

javascript初学者笔记——关于innerHTML、innerText、outerHTML和outerText的区别

两张图来说明innerHTML、innerText、outerHTML和outerText四者之间的区别: 1.inner他们两口子: [图片] 2.outer他们两口子: [图片] 最后让我们来总结...
  • Lvbey
  • Lvbey
  • 2016年05月17日 21:29
  • 699

innerHTML、innerText和outerHTML、outerText的区别

原文链接:1、区别描述如下:  innerHTML 设置或获取位于对象起始和结束标签内的 HTMLouterHTML 设置或获取对象及其内容的 HTML 形式innerText 设置或获取位...
  • liliiii
  • liliiii
  • 2014年09月20日 10:17
  • 651

JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?

一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系? jS中设置或者获取所选内容的值: ①innerHTML :属性设置或返回该标签...

innerText innerHTML outerText outerHTML的区别与联系

这四个属性在开发过程中经常困扰我,为此我特意查了一下资料并且做了一些总结。 一、innerText与innerHTML的区别和联系        1、显示问题:   若是纯文本例如:Hello ...

innerText,outerText,innerHTML,outerHTML区别

document.body.innerHTML; innerText,outerText,innerHTML,outerHTML资料outerHTML:标签对象外部的HTML文本(包括该标签) ...

innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

今天看了很多文章关于innerHTML、outerHTML、innerText、outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容。很多文章在描述这些区别的时候,都...
  • bfboys
  • bfboys
  • 2017年01月10日 22:58
  • 240

innerHTML,outerHTML,innerText,outerText ,Value的区别和用法--表单 文本框不可编辑的方法

1、innerHtml 和 innerText test1 test2 在JS中可以使用: test.innerHTML:   也就是从对象的起始位置到终止位置的全部内容,包括Html...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript innerHTML、outerHTML、innerText、outerText的区别
举报原因:
原因补充:

(最多只允许输入30个字)