JavaScript中innerHTML,innerText,outerHTML的用法及区别


Posted in Javascript onSeptember 01, 2015

不废话了,请看下文示例介绍。

用法:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>

在JS中可以使用:

test.innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

从起始位置到终止位置的内容, 但它去除Html标签

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是

<div id="test"><span style="color:red">test1</span> test2</div>

完整示例:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明:

innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

innerHTML和innerText如何区分?

示例代码:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a 
href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a 
href="javascript:alert(test.innerText)">inerHTML内容</a>

共同点:innerHTML和innerText都会把元素内内容替换掉。

不同点:

1,innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span>
test2 ”。

2,innerText:

从起始位置到终止位置的内容, 但它去除Html标签

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

值得注意的是,innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。

以上就是介绍JavaScript中innerHTML,innerText,outerHTML的用法及区别,希望大家喜欢。

Javascript 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
Jquery常用的方法汇总
Sep 01 #Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 #Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 #Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 #Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 #Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 #Javascript
jquery实现点击变换导航样式的方法
Aug 31 #Javascript
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP 翻页 实例代码
2009/08/07 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
JSON相关知识汇总
2015/07/03 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
2013年高中生自我评价
2013/10/23 职场文书
初中语文教师研修日志
2015/11/13 职场文书