innerHTML和innerText
document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下。
示例1
- <html>
- <head><title>innerHTML</title></head>
- <body>
- <p id="p1">hello world </p>
- <script>
- 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"
示例2
- <html>
- <head><title>innerHTML</title></head>
- <body>
- <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浏览器自己的属性,不过后来的浏览器部分实现这个属性罢了。
outerHTML
说到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标准的示例:
- <html>
- <head><title>innerHTML</title></head>
- <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标签之后的内容,这是个在所有浏览器均可使用的方法。
innerHTML和innerText的更多相关文章
- innerHTML与innerText的异同
在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...
- JS中innerHTML,innerText,value
一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...
- JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...
- JS中innerHTML 和innerText和value的区别
(1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...
- (转)JS中innerHTML,innerText,value
原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...
- (转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别 博客分类: CSS/ ...
- innerHTML与innerText的PK
一.innerText属性用来定义对象所要输出的文本,在本例中innerText把对象it中的文本"您喜欢看微微一笑很倾城吗?"变成了"超级喜欢!"(语句it. ...
- textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
- 测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别 我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...
随机推荐
- 小笔记(一):ajax传递数组及将ajax返回数据赋值
当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,conten ...
- Echart..js插件渲染报错 data.length<1?
问题 getJSON提交 返回数据正常,在传入参数进行序列化,渲染报表时报错 option.data.length < 1. 分析 1.可能情况一: . 可自己明明是getJSON()把渲染放 ...
- cli下的php(并传递参数)
传递参数有两种方式: 第一种使用文件操作,STDOUT作为标准输出,STDIN作为标准输入 使用fwrite($file,$string)作输出,使用fgets($file)作输入.这种应该算是继承自 ...
- eclipse开发android程序常见问题解决办法
1:R.java不自动更新或不见,gen文件夹里没生成文件. 解决办法: 这个一般是xml文件中有错误,如有英文大写,属性值错误等,解决了就会好. 如果错都排除了还没有生成或更新,那么可以点击proj ...
- 为你的TabBar添加Badge-感谢分享
实现过程 首先定义了三种Badge类型 typedef NS_ENUM(NSUInteger, CustomBadgeType){ kCustomBadgeStyleRedDot, //显示普通红点类 ...
- Hibernate Session 获取connection
Hibernate Session 获取connection 由于最近一个项目要用到一条辅助的SQL ,hibernate里面的SQLQuery API 总的SQL语句不能包含 : 冒号, 固放弃Hi ...
- Android 将文件保存到SD卡中
①写文件到sd卡中需要获得权限,在AndroidManifest.xml中添加如下权限: <uses-permission android:name="android.permissi ...
- Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderListener(Maven工程)
Eclipse中tomcat部署工程启动后报错: 严重: Error configuring application listener of class org.springframework.web ...
- C#判断操作系统类型汇总
Windows操作系统的版本号一览 操作系统 PlatformID 主版本号 副版本号 Windows95 1 4 0 Windows98 1 4 10 WindowsMe 1 4 90 Window ...
- Oracle正则表达式
Oracle正则表达式 正则表达式具有强大.便捷.高效的文本处理功能.能够添加.删除.分析.叠加.插入和修整各种类型的文本和数据.Oracle从10g开始支持正则表达式. 下面通过一些例子来说明 ...