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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
详解jQuery选择器
Dec 21 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
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
第十三节 对象串行化 [13]
2006/10/09 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php分页函数完整实例代码
2014/09/22 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
Python 除法小技巧
2008/09/06 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python做简单的字符串匹配详解
2017/03/21 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python logging模块的使用总结
2019/07/09 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
初中语文教学反思
2014/02/02 职场文书
房产继承公证书
2014/04/09 职场文书
难忘的一课教学反思
2014/04/30 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
个人收入证明模板
2014/09/18 职场文书
先进教师事迹材料
2014/12/16 职场文书
法定代表人资格证明书
2015/06/18 职场文书
团委副书记工作总结
2015/08/14 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
vue自定义右键菜单之全局实现
2022/04/09 Vue.js