________________________________________________________________________________________________________

转载自：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. 第一次JVM分析记录：Out of Memory Error (workgroup.cpp:96), pid=6196, tid=139999645685504

    tomcat的catalina.out日志报错如下: Exception in thread "http-bio-8081-Acceptor-0" java.lang.OutOfM ...

  2. ReactiveSwift源码解析(二) Bag容器的代码实现

    今天博客我接着上篇博客的内容来,上篇博客我们详细的看了ReactiveSwift中的Observer已经Event的代码实现.接下来我们来看一下ReactiveSwift中的结构体Bag的实现.Bag ...

  3. AutoHotkey 自动化脚本工具实例

    AHK 自动按键工具 https://www.autohotkey.com/ 可实现功能 快捷键 启动 浏览器.CMD命令.弹出框 可定时执行任务 可改键 将A与B互换 可快捷替换字符串 测试如下: ...

  4. 在Windows 10 + Python 3.6.5 中用 pip 安装最新版 TensorFlow v1.8 for GPU

    声明 什么cuDNN之类的安装,应该是毫无难度的,按照官网的教程来即可,除非...像我一样踩了狗屎运.咳咳,这些问题不是本文的关键. 本文的关键是解决pip安装tensorflow gpu版的问题. ...

  5. 从壹开始微服务 [ DDD ] 之七 ║项目第一次实现 & CQRS初探

    前言 哈喽大家周五好,我们又见面了,感谢大家在这个周五读我的文章,经过了三周的时间,当然每周两篇的速度的情况下,咱们简单说了下DDD领域驱动设计的第一部分,主要包括了,<项目入门DDD架构浅析& ...

  6. 200行代码，7个对象——让你了解ASP.NET Core框架的本质

    2019年1月19日,微软技术(苏州)俱乐部成立,我受邀在成立大会上作了一个名为<ASP.NET Core框架揭秘>的分享.在此次分享中,我按照ASP.NET Core自身的运行原理和设计 ...

  7. Ubuntu16.04 部署配置GO语言开发环境 & 注意事项

    1. 安装GO 安装go语言包: $ curl -O https://storage.googleapis.com/golang/go1.10.1.linux-amd64.tar.gz   下载完成后 ...

  8. 【Android Studio安装部署系列】十、Android studio打包发布apk安装包

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 使用Android studio发布apk安装包的操作步骤. 开始打包发布apk Build > Generate Signe ...

  9. ZooKeeper 03 - ZooKeeper集群的脑裂问题 (Split Brain问题)

    目录 1 ZooKeeper的主从机制 2 什么是ZooKeeper的脑裂 2.1 脑裂现象的表现 2.2 为什么会出现脑裂 3 ZooKeeper如何解决"脑裂" 3.1 3种可 ...

  10. RDIFramework.NET V3.3 Web版新增日程管理功能模块

    功能描述 在RDIFramework.NET V3.3 Web版本我们新增了日程管理.基于月.周.日的日历视图,把安排到每一天的具体时间点,让每一天的时间都充分利用:甚至您也可以把个人非工作事项也安排 ...