博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
innerHTML和innerText的使用和区别
阅读量:5105 次
发布时间:2019-06-13

本文共 1093 字,大约阅读时间需要 3 分钟。

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

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

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

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

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

 

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

示例代码:

示例1: 

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

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

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

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

示例2

 

通过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设置包含自身标签在内文本

 
    
出处:

转载于:https://www.cnblogs.com/siduoxiaohua/p/10530876.html

你可能感兴趣的文章
在LINQ TO SQL 中使用MVC3中的DataAnnotations 【MetadataType】
查看>>
MSSQL2005约束(五)-default约束
查看>>
[Codeforces Round #159 (Div. 2)]A. Sockets
查看>>
【转载】Cacti安装的详细步骤
查看>>
weblogic设置数据库自动重连
查看>>
[数据结构][LINUX内核编程]学习笔记(二)
查看>>
Spring AOP 理论
查看>>
Java EE、Java SE和Java ME
查看>>
为什么要使用MQ消息中间件?它解决了什么问题?
查看>>
二手书网页版mis系统
查看>>
Oracle_高级功能(9) 性能优化
查看>>
OpenGL入门程序二:绘制简单的圆
查看>>
计算线段和圆的交点
查看>>
extjs中修改confirm的显示按钮
查看>>
linux2.4.0源码下载地址(配合毛德操情景分析)
查看>>
vnc Unable to licence server: "XML error 0:0 Error: First Tag not found"问题的解决
查看>>
java项目移植出现的错误
查看>>
vs2015 编译时错误列表中没有错误,dll却没有生成出来
查看>>
使用mybatis调用存储过程(注解形式和配置文件形式)
查看>>
ASP中预编件aspx安装netframewo
查看>>