________________________________________________________________________________________________________

转载自：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. powerDesigner生成数据结构图以及对应sql导出方法

    1.下载powerDesigner 链接地址为http://soft.onlinedown.net/soft/577763.htm 2.打开软件,file -> new project,新建一个 ...

  2. .NET微服务调查结果

    .NET Core就是专门针对模块化的微服务架构而设计, 在2018年国庆时间展开.NET微服务的使用情况,本次调查我们总计收到了来自378个开发者的调查.从落地现状.架构体系.未来趋势等方面对微服务 ...

  3. ASP.NET Core 快速入门（实战篇）

    上篇讲了<asp.net core在linux上的环境部署>.今天我们将做几个小玩意实战一下.用到的技术和工具有mysql.websocket.AngleSharp(爬虫html解析).n ...

  4. Android Studio导出JavaDoc时中文乱码问题解决

    导出过程中,如果出现JavaDoc中文乱码的问题,可以在Other command line arguments栏目添加命令参数:-encoding UTF-8 -charset UTF-8(如果是G ...

  5. Javascript高级编程学习笔记（97）—— WebGL(3) WebGL上下文(1)

    WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...

  6. Python写爬虫爬妹子

    最近学完Python,写了几个爬虫练练手,网上的教程有很多,但是有的已经不能爬了,主要是网站经常改,可是爬虫还是有通用的思路的,即下载数据.解析数据.保存数据.下面一一来讲.   1.下载数据 首先打 ...

  7. Scanner对象及其获取数据出现小问题和解决方案

    Scanner类简介: Java 5添加了java.util.Scanner类,我们可以通过Scanner类来获取用户输入.它是以前的StringTokenizer和Matcher类之间的某种结合.由 ...

  8. AI - TensorFlow - 可视化工具TensorBoard

    TensorBoard TensorFlow自带的可视化工具,能够以直观的流程图的方式,清楚展示出整个神经网络的结构和框架,便于理解模型和发现问题. 可视化学习:https://www.tensorf ...

  9. body标签中l的相关标签

    字体标签: h1~h6.font. u.b,.strong. em. sup. sub 排版标签: div,.span.br.hr.center.pre 图片标签: img 超链接: a 列表标签: ...

  10. 文本分布式表示（三）：用gensim训练word2vec词向量

    今天参考网上的博客,用gensim训练了word2vec词向量.训练的语料是著名科幻小说<三体>,这部小说我一直没有看,所以这次拿来折腾一下. <三体>这本小说里有不少人名和一 ...