详谈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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
基于canvasJS在PHP中制作动态图表
May 30 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来处理多个提交任务
2006/10/09 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
JS实现留言板功能
2017/06/17 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
.NET方向面试题
2014/11/20 面试题
行政专员岗位职责
2014/01/02 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
毕业生见习报告总结
2014/11/08 职场文书
公司表扬稿范文
2015/05/05 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers