javascript innerHTML、outerHTML、innerText、outerText的区别

更新时间：2008年11月24日 20:50:05 投稿：mdxy-dxy

这篇文章主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下

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

<html> 
<head> 
<title>Demo</title> 
<style><!-- 
body {font-family:"宋体";color="blue";font-size="9pt"} 
--> </style> 
<script language="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="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>"; 
} 
//.outerText 
function outerTextDemo() 
{ 
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>

您可能感兴趣的文章:

深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
这篇文章主要给大家深入的介绍了关于xhr（XMLHttpRequest）/jsonp请求之abort的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
javascript实现倒计时跳转页面
本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理，非常的简单实用，有需要的小伙伴可以参考下。
2016-01-01
JavaScript 中 JSON.parse 函数和 JSON.stringify 函数
这篇文章主要介绍了JavaScript -- JSON.parse 函数和 JSON.stringify 函数,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
js中几种去掉字串左右空格的方法
js中几种去掉字串左右空格的方法...
2006-12-12
微信小程序地图定位的实现方法实例
小程序功能的强大想必使用过的人都知道,下面这篇文章主要给大家介绍了关于微信小程序地图定位的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
原生js和css实现图片轮播效果
这篇文章主要为大家详细介绍了原生javascript和css实现图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
Knockoutjs的环境搭建教程
最近要在项目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的环境搭建，并进行了一个简单的测试,需要的朋友可以了解下
2012-11-11
js数据类型检测总结
这篇文章给大家分享了js数据类型检测的相关实例内容，有需要的朋友可以测试下。
2018-08-08
原生js+css调节音量滑块
这篇文章主要介绍了原生js+css调节音量滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
TypeScript实现字符串转树结构的方法详解
有一个多行字符串，每行开头会用空格来表示它的层级关系，每间隔一层它的空格总数为2，如何将它转为json格式的树型数据？本文就跟大家分享下这个算法
2022-09-09

javascript innerHTML、outerHTML、innerText、outerText的区别

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具