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>

 

  • 大小: 11.2 KB

JavaScript中innerHTML、outerHTML、innerText、outerText的用法与区别认识

2017百度前端技术学院(js任务一) 一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系? 在JS中很容易将以上几者记错弄混...
  • johnchow2017
  • johnchow2017
  • 2017年04月25日 22:54
  • 444

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

看了很多文章关于, 关于innerHTML、outerHTML、innerText、outerText的区别,还是很模糊的一个印象,所以自己总结下这xie...
  • huangyibin628
  • huangyibin628
  • 2014年04月13日 23:09
  • 7493

innerHTML outerHTML innerText textContent的区别

在网上看了很多博文介绍他们之间的区别,大部分都说FF中innerText不能使用,但经过自己试验,是可以用的,所以自己把各种情况总结了一下。 首先是innerHTML,这个就不用多说了,返回的是标签...
  • win0032
  • win0032
  • 2016年04月22日 11:36
  • 4342

innerHTML、innerText、outerHTML和value的区别

之前在JavaScript中写代码的的时候,总被innerHTML、innerText、outerHTML以及value搞晕,用的时候不经意间就会用错。现在又有学习的朋友被搞晕了,特意总结一下。 定义...
  • qq_36356142
  • qq_36356142
  • 2016年11月03日 17:58
  • 1569

javascript对象小探之十一——innerHTML、outerHTML、innerText、textContent区别

test1 test2 test.innerHTML(所有浏览器支持): “test1 test2 ” test.outerHTML(所有浏览器支持):    除了包含...
  • debugingstudy
  • debugingstudy
  • 2013年09月05日 00:46
  • 2955

innerText,outerText,innerHTML,outerHTML

innerText,outerText,innerHTML,outerHTML 这次我们要使用另一些对象属性对来实现动态改变文本,它们就是:innerText,outerText,innerHTML,...
  • zhaoxiaoyang5156
  • zhaoxiaoyang5156
  • 2007年09月28日 17:41
  • 482

innerText,outerText,innerHTML,outerHTML区别

document.body.innerHTML; innerText,outerText,innerHTML,outerHTML资料outerHTML:标签对象外部的HTML文本(包括该标签) ...
  • yixian918
  • yixian918
  • 2015年12月22日 16:01
  • 300

innerText,outerText,innerHTML,outerHTML

 innerText,outerText,innerHTML,outerHTML 这次我们要使用另一些对象属性对来实现动态改变文本,它们就是:innerText,outerText,innerHTML...
  • alex07
  • alex07
  • 2008年03月27日 17:30
  • 84

outerHTML,outerTEXT,innerHTML,innerTEXT

读写文档操作 li:{cursor:pointer} are you ok? hello what is your name? what are you doing? do you li...
  • change_for_you
  • change_for_you
  • 2016年03月08日 11:06
  • 114

outerText、innerText 、outerHTML、innerHTML

首先,看我们的html定义    innerHTML,innerText,outerHTML,outeterText ...
  • fox123871
  • fox123871
  • 2011年08月16日 23:20
  • 1965
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript innerHTML、outerHTML、innerText、outerText的区别
举报原因:
原因补充:

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