________________________________________________________________________________________________________

转载自：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. 使用d3.v5实现条形图

    效果图: 条形图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. 【Oracle RAC】Linux系统Oracle11gR2 RAC安装配置详细过程V3.1（图文并茂）

    [Oracle RAC]Linux系统Oracle11gR2 RAC安装配置详细过程V3.1(图文并茂) 2 Oracle11gR2 RAC数据库安装准备工作2.1 安装环境介绍2.2 数据库安装软件 ...

  3. python word转pdf

    原理 使用python win32 库 调用word底层vba,将word转成pdf 安装pywin32 pip install pywin32 python代码 from win32com.clie ...

  4. 聊聊Unity2018的LWRP和混合光照

    0x00 前言 在这篇文章中,我们选择了过去几周Unity官方社区交流群以及UUG社区群中比较有代表性的几个问题,总结在这里和大家进行分享.主要涵盖了** Scripting.Assetsbundle ...

  5. ReactiveSwift源码解析(六) SignalProtocol的take(first)与collect()延展实现

    上篇博客我们聊了observe().map().filter()延展函数的具体实现方式以及使用方式.我们在之前的博客中已经聊过,Signal的主要功能是位于SignalProtocol的协议延展中的, ...

  6. Kafka 消费者相关配置

    消费者相关配置类为  org.apache.kafka.clients.consumer.ConsumerConfig 具有以下配置参数 1. GROUP_ID_CONFIG = "grou ...

  7. 解决Ajax请求时无法重定向的问题

    今天发现,当使用Ajax请求时,如果后台进行重定向到其他页面时是无法成功的,只能在浏览器地址栏输入才能够实现重定向. Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面. 需要实现的功能是, ...

  8. 在linux（centos）系统安装nginx教程

    最近在切换服务器操作系统,简单记录一下 一.安装nginx需要如下环境  1.gcc  编译依赖gcc环境,如果没有gcc环境,需要安装gcc yum install gcc-c++  2.PCRE ...

  9. .NET CORE 中使用AutoMapper进行对象映射

    简介 AutoMapper uses a fluent configuration API to define an object-object mapping strategy. AutoMappe ...

  10. Python 包构建教程

    目录 setuptools 和 setup.py 你所需要做的事 & 一些概念 基础概念 关于源码分发文件和二进制分发文件 示例和分发选择 pure python module package ...