________________________________________________________________________________________________________

转载自：http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.aspx

js中innerHTML与innerText的用法与区别

用法：

<div id="test">
   <span style="color:red">test1</span> test2
</div>

在JS中可以使用：

test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

　　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

　　从起始位置到终止位置的内容, 但它去除Html标签

　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

　　除了包含innerHTML的全部内容外, 还包含对象标签本身。

　　上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>


完整示例：

<div id="test">
   <span style="color:red">test1</span> test2
</div>

<a href="JavaScript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

________________________________________________________________________________________________________

    1. <html>
    2. <head></head>
    3. <frameset frameborder="yes" frameborder="1" rows="40%,*">
    4. <frame name="top" src="1.html">
    5. <frame name="bottom" src="2.html">
    6. </frameset>
    7. </html>
    8. <html>
    9. <head>
    10. <script language="javascript">
    11. function init()
    12. {
    13. var aaa = parent.window.frames[0].document.body.innerHTML;
    14. alert(aaa);
    15. }
    16. </script>
    17. </head>
    18. <body>
    19. <p align="center">nothing</p>
    20. <p align="center"><input type="button" onclick="init()"; value="click"></p>
    21. </body>
    22. </html>
    23. <html>
    24. <center>百度 谷歌 必应</center>
    25. </html>

js中innerHTML、outerHTML与innerText的用法与区别的更多相关文章

  1. JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用

    value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...

  2. js中的apply与call的用法与区别

    call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受参数的 ...

  3. JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val()

    一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...

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

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

  5. innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

    今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...

  6. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  7. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  8. 小程序 js中获取时间new date()的用法（网络复制过来自用）

    js中获取时间new date()的用法   获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获 ...

  9. js中push(),pop(),unshift(),shift()的用法

    js中push(),pop(),unshift(),shift()的用法小结   1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及 ...

随机推荐

  1. Android开发—— Tablayout的使用

    Tablayout的使用 属性 属性名 说明 app:tabMod 设置Tab模式 app:tabTextColor 设置文本颜色 app:tabSelectedTextColor 设置选中文本颜色 ...

  2. Vagrant 构建 Linux 开发环境

    Vagrant 是一个简单易用的部署工具,用英文说应该是 Orchestration Tool .它能帮助开发人员迅速的构建一个开发环境,帮助测试人员构建测试环境, Vagrant 基于 Ruby 开 ...

  3. ORM（四）字段参数

    null:如果null=True,则该字段在数据库中的值可以为NULL,默认null=False. blank:如果blank=True,前端form表单可以空,注意,这与NULL不同.NULL纯粹与 ...

  4. CVE-2019-0686|Microsoft Exchange特权提升漏洞补丁已发布

    Microsoft Exchange Server中存在一个特权提升漏洞.成功利用此漏洞的攻击者可以获得与Exchange服务器的任何其他用户相同的权限.这可能允许攻击者执行诸如访问其他用户的邮箱之类 ...

  5. 关于Django报错django.core.exceptions.ImproperlyConfigured: Requested setting DEBUG, but settings are not configure

    报错代码:django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE, but se ...

  6. SpringBoot基础系列一

    SpringBoot基础知识概览 特性 核心理念:约定优于配置 特点: 1. 开箱即用,根据项目依赖自动配置 2. 功能强大的服务体系,如嵌入式服务.安全 3. 绝无代码生成,不用写.xml配置,用注 ...

  7. Python + PyQt5 实现美剧爬虫可视工具（二）

    美剧<权力的游戏>终于开播最后一季了,在上周写了个简单的可视化美剧的爬虫软件来爬取美剧,链接:https://www.cnblogs.com/weijiutao/p/10614694.ht ...

  8. 写给 Android 开发的小程序布局指南，Flex 布局！

    一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...

  9. 将svg文件化成字体图标的步骤

     一 前提摘要     有一个活就是按照需求在现有的项目中新增几个项目和修改几个项目,是很简单的,但当中遇到了一个小问题,就是tabs中图标选中和被选中的颜色问题,如果是新开发的,目前掌握的有两种办法 ...

  10. Python：黑板课爬虫闯关第一关

    近日发现了[黑板课爬虫闯关]这个神奇的网页,练手爬虫非常的合适 地址:http://www.heibanke.com/lesson/crawler_ex00/ 第一关非常的简单 get 请求网址,在响 ...