javascript innerHTML、outerHTML、innerText、outerText的区别


Posted in Javascript onNovember 24, 2008

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设置包括标签在内的文本。
javascript innerHTML、outerHTML、innerText、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>
Javascript 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
javascript call和apply方法
Nov 24 #Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 #Javascript
javascript 贪吃蛇实现代码
Nov 22 #Javascript
js利用div背景,做一个竖线的效果。
Nov 22 #Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 #Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 #Javascript
js刷新框架子页面的七种方法代码
Nov 20 #Javascript
You might like
PHP 超链接 抓取实现代码
2009/06/29 PHP
php读取xml实例代码
2010/01/28 PHP
详解json在php中的应用
2018/09/30 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
另一个javascript小测验(代码集合)
2011/07/27 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
PyTorch学习笔记之回归实战
2018/05/28 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python使用Matplotlib画条形图
2020/03/25 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
python实现无边框进度条的实例代码
2020/12/30 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
两年的个人工作自我评价
2014/01/10 职场文书
车辆安全检查制度
2014/01/12 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
市场部管理制度
2014/02/02 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript
vue 自定义组件添加原生事件
2022/04/21 Vue.js