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>

您可能感兴趣的文章:

表单提交前触发函数返回true表单才会提交
这篇文章主要介绍了表单提交前触发函数当返回true表单才会提交的具体实现,需要的朋友可以参考下
2014-03-03
如何用JS实现简单的数据监听
这篇文章主要介绍了如何用JS实现简单的数据监听，对数据监听感兴趣的同学，可以参考一下
2021-05-05
JavaScript setTimeout()基本用法有哪些
这篇文章主要介绍了JavaScript setTimeout()基本用法有哪些,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
微信小程序实现简单的select下拉框
这篇文章主要为大家详细介绍了微信小程序实现简单的select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
javascript匀速运动实现方法分析
这篇文章主要介绍了javascript匀速运动实现方法,结合实例形式分析了JavaScript匀速运动的具体实现步骤与相关注意事项,需要的朋友可以参考下
2016-01-01
使用Visual Studio 2022开发前端的详细教程
这篇文章主要介绍了使用Visual Studio 2022开发前端,在浏览器中可以使用CDN源引用需要的客户端库，可如果在企业内网使用，无法访问CDN源时，需要将客户端库下载到本地使用，需要的朋友可以参考下
2022-05-05
微信小程序结合mock.js实现后台模拟及调试
这篇文章主要介绍了微信小程序结合mock.js实现后台模拟及调试，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
JavaScript实现找出字符串中第一个不重复的字符
这篇文章主要介绍了JavaScript实现找出字符串中第一个不重复的字符的方法,需要的朋友可以参考下
2014-09-09
关于对async await效率问题的深入思考
这篇文章主要给大家介绍了关于对async await效率问题的深入思考,async和await要搭配Promise使用,它进一步极大的改进了Promise的写法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
鸿蒙系统中的 JS 开发框架
最近华为鸿蒙OS 2.0正式开源！关于鸿蒙的教程其实网上也已经有一些尝鲜的小伙伴分享了相关文章，这篇文章主要为大家详细介绍了鸿蒙系统中的 JS 开发框架，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09