innerHTML和innerText详解编程语言
document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下。
示例1script var content = document.getElementById( p1 ); alert(content.innerHTML); alert(content.innerText) /script /body /html
通过IE浏览器打开,弹出内容为 hello world 和 hello world
通过 Firefox 浏览器打开,弹出内容为 hello world 和 undefined
通过 chrome 浏览器打开,弹出内容为 hello world 和 hello world
示例2body div id= d1 p id= p1 hello world /p /div script var content = document.getElementById( d1 ); alert(content.innerHTML); alert(content.innerText) /script /body /html
通过IE浏览器打开,弹出内容为 和 通过 Firefox 浏览器打开,弹出内容为 和 通过 chrome 浏览器打开,弹出内容为 和
通过上面两个示例,可以看出:
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
同时,innerHTML 是所有浏览器都支持的,innerText 是IE浏览器和chrome 浏览器支持的,Firefox浏览器不支持。其实,innerHTML 是W3C 组织规定的属性;而innerText 属性是IE浏览器自己的属性,不过后来的浏览器部分实现这个属性罢了。
说到innerHTML,顺便说一下跟innerHTML相对的outerHTML属性。
继续看上面的代码,将alert(content.innerText) 修改为 alert(content.outerHTML)
通过浏览器可以看到弹出框为 p id= p1 hello world /p
和 divid= d1 p id= p1 hello world /p /div
outerHTML指的是除了包含innerHTML的全部内容外, 还包含对象标签本身。
总结说明
innerHTML是符合W3C标准的 属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器),因此,尽可能地去使用 innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则 表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
body div id= d1 p id= p1 hello world /p /div script var content = document.getElementById( p1 ); alert(content.innerHTML.replace(/ lt;.+? /gim, )); /script /body /html
弹出的为去掉了html标签之后的内容,这是个在所有浏览器均可使用的方法。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/13445.html
cxml相关文章
- JavaScript判断输入的参数是否是国内合法的邮编地址详解编程语言
- 纯HTML5 Canvas实现的饼图详解编程语言
- Java 中调用wget 的 例子详解编程语言
- java图片格式转化(例如jpg格式转化png)详解编程语言
- Java对json是否合法进行格式校验详解编程语言
- 一个通用的java应用程序启动shell脚本详解编程语言
- 使用用Gson操作Json示例详解编程语言
- java.lang.StringBuilder和java.lang.StringBuffer (JDK1.8)详解编程语言
- 简单的一些表单验证,拿来即可用详解编程语言
- 将Excel中的数据批量导入数据库表详解编程语言
- HTML中 JS 右键详解编程语言
- java 字符串替换函数replace ,如何同时替换多个字符串详解编程语言
- 移动端flex布局详解编程语言
- 关于搜素引擎lucene简单实用详解编程语言
- Drools决策表的使用详解编程语言
- java批量读取多个文件并存入数据库详解编程语言
- FormData对象详解编程语言
- 判断日期字符串是否是对应格式的日期字符串详解编程语言
- Python3 pip命令报错:Fatal error in launcher: Unable to create process using ‘”‘详解编程语言
- Spring Boot 2 (五):Docker Compose + Spring Boot + Nginx + Mysql 实践详解编程语言
- jquery.cookie.js中$.cookie() 使用方法详解编程语言
- PPC程序低版本到高版本移植的问题详解编程语言
- 面向对象中的特殊的成员修饰符和几个特殊的方法详解编程语言