document 对象中有innerHTML和innerText 两个属性， 这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？通过几个例子来看一下。

示例1

  1. <html>
  2. <head><title>innerHTML</title></head>
  3. <body>
  4. <p id="p1">hello world </p>
  5. <script>
  6. var content = document.getElementById("p1");
  7. alert(content.innerHTML);
  8. alert(content.innerText)
  9. </script>
  10. </body>
  11. </html>

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

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

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

示例2

  1. <html>
  2. <head><title>innerHTML</title></head>
  3. <body>
  4. <div id="d1"><p id="p1">hello world </p></div>
  5. <script>
  6. var content = document.getElementById("d1");
  7. alert(content.innerHTML);
  8. alert(content.innerText)
  9. </script>
  10. </body>
  11. </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标准的示例：

  1. <html>
  2. <head><title>innerHTML</title></head>
  3. <body>
  4. <div id="d1"><p id="p1">hello world </p></div>
  5. <script>
  6. var content = document.getElementById("p1");
  7. alert(content.innerHTML.replace(/& lt;.+?>/gim,''));
  8. </script>
  9. </body>
  10. </html>

弹出的为去掉了html标签之后的内容，这是个在所有浏览器均可使用的方法。

innerHTML和innerText的更多相关文章

  1. innerHTML与innerText的异同

    在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...

  2. JS中innerHTML，innerText，value

    一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...

  3. JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...

  4. JS中innerHTML 和innerText和value的区别

    (1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...

  5. (转)JS中innerHTML，innerText，value

    原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...

  6. (转)innerHTML、innerText和outerHTML、outerText的区别

    原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/ ...

  7. innerHTML与innerText的PK

    一.innerText属性用来定义对象所要输出的文本,在本例中innerText把对象it中的文本"您喜欢看微微一笑很倾城吗?"变成了"超级喜欢!"(语句it. ...

  8. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

  9. 测试开发技术：DOM中 innerHTML、innerText、outerHTML、outerText的区别

    测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别   我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...

随机推荐

  1. Uniqueidentifier数据类型

    一.Uniqueidentifier数据类型 可存储16字节的二进制值 Uniqueidentifier用来存储一个全局唯一标识符,即GUID.GUID是唯一的二进制数:世界上的任何两台计算机都不会生 ...

  2. php分页笔记

    在做留言板的时候,用到了分页,所以写了这个分页笔记   既然已经开始写分页了,肯定掌握了了php的一些知识以及mysql的基本操作   在做分页的时候,我也遇到了很多问题,但是大家不要怕,无论什么问题 ...

  3. python调用Moxa PCOMM Lite通过串口Ymodem协议发送文件

    本文采用python 2.7编写. 经过长期搜寻,终于找到了Moxa PCOMM Lite.调用PCOMM.DLL可以非常方便的通过串口的Xmodem.Ymodem.Zmodem等协议传输文件,而无需 ...

  4. 定位 - CoreLocation - 区域报警

    #import "ViewController.h" #import <CoreLocation/CoreLocation.h> @interface ViewCont ...

  5. 避免eclipse下启动run就进入debug模式

    分析原因:可能是eclipse的一个bug 解决方法:进入手机开发者模式设置,关闭usb调试和开发者模式,再重新打开即可.

  6. E.164 Format

    From http://en.wikipedia.org/wiki/E.164 E.164 is an ITU-T recommendation, titled The international p ...

  7. Stanford Parser学习入门(3)-标记

    以下是Stanford parser中的标记中文释义供参考. probabilistic context-free grammar(PCFG)     ROOT:要处理文本的语句 IP:简单从句 NP ...

  8. MySQL 对于大表（千万级），要怎么优化呢?

    http://www.zhihu.com/question/19719997 提问:如何设计或优化千万级别的大表?此外无其他信息,个人觉得这个话题有点范,就只好简单说下该如何做,对于一个存储设计,必须 ...

  9. 【POJ 3162】 Walking Race (树形DP-求树上最长路径问题，+单调队列)

    Walking Race   Description flymouse's sister wc is very capable at sports and her favorite event is ...

  10. 怎么样删除eclipse已经记录svn的地址

    eclipse-->window-->show view-->svn选项卡中选中要删除的svn链接,点击右键废弃即可. 1.