详谈innerHTML innerText的使用和区别


Posted in Javascript onAugust 18, 2017

document对象中有innerHTML、innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的;

1) innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身)

2) outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身)

3) innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身

4) outerText设置或获取标签自身及其所包含的文本信息(包括自身)

 详谈innerHTML innerText的使用和区别

innerText和outerText在获取的时候是相同效果,但在设置时,innerText仅设置标签所包含的文本,而outerText设置包含包括标签自身在内的文本。

示例代码:

示例1: 

详谈innerHTML innerText的使用和区别

通过IE浏览器打开,弹出内容为"hello world""hello world"

通过Firefox浏览器打开,弹出内容为"hello world""undefined"

通过chrome浏览器打开,弹出的内容为"hello world""hello world"

alert(content.outerHTML)则弹出:"<p id="p1">hello world</p>"

示例2

 详谈innerHTML innerText的使用和区别

通过IE浏览器打开,弹出内容为"<p id="p1">hello world</p>""hello world"

通过Firefox浏览器打开,弹出内容为"<p id="p1">hello world</p>""undefined"

通过chrome浏览器打开,弹出的内容为"<p id="p1">hello world</p>""hello world"

alert(content.outerHTML)则弹出:"<div id="d1"><p id="p1">hello world</p></div>"

综上innerHTML所有浏览器都支持,innerText是IE浏览器支持的,Firefox浏览器不支持。

不同之处:

1) innerHTML、outerHTML在设置标签之间的内容时,包含的HTML会被解析;而innerText、outerText则不会;

2) innerHTML、innerText仅设置标签之间的文本,而outerHTML、outerText设置包含自身标签在内文本

以上这篇详谈innerHTML innerText的使用和区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
js loading加载效果实现代码
Nov 24 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 #Javascript
webpack2.0配置postcss-loader的方法
Aug 17 #Javascript
微信小程序 获取javascript 里的数据
Aug 17 #Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 #Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 #Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 #Javascript
微信小程序 获取session_key和openid的实例
Aug 17 #Javascript
You might like
php注销代码(session注销)
2012/05/31 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
php和asp语法上的区别总结
2019/05/12 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Django CBV类的用法详解
2019/07/26 Python
python爬虫 正则表达式解析
2019/09/28 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Python如何输出警告信息
2020/07/30 Python
Python程序慢的重要原因
2020/09/04 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
小组合作学习反思
2014/02/18 职场文书
2014年端午节活动方案
2014/03/11 职场文书
努力学习演讲稿
2014/05/10 职场文书
环保倡议书怎么写
2014/05/16 职场文书
采购部长岗位职责
2014/06/13 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
鲁迅故里导游词
2015/02/05 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
小学生家长意见
2015/06/03 职场文书
电视新闻稿
2015/07/17 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
python基础之错误和异常处理
2021/10/24 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers