js中 innerHTML与innerText的用法与区别及解决Firefox不支持Js的InnerHtml问题

用法：

<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(/& lt;.+?>/gim,''))">无HTML,符合W3C标准</a>

-------------------------------------------------------------------------------------------------------------------------------

<html>

<head></head>

<frameset frameborder="yes" frameborder="1" rows="40%,*">

<frame name="top" src="1.html">

<frame name="bottom" src="2.html">

</frameset>

</html>

<html>

<head>

<script language="javascript">

function init()

{

var aaa = parent.window.frames[0].document.body.innerHTML;

alert(aaa);

}

</script>

</head>

<body>

<p align="center">nothing</p>

<p align="center"><input type="button" onclick="init()"; value="click"></p>

</body>

</html>

<html>

<center> 汽车 房产 女人</center>

</html>

解决Firefox不支持Js的InnerHtml问题

正 文：

<

由于W3C标准对Javascript语法进行了规范，即ECMAScript。而Firefox严格遵守ECMAScript规范，所以对 javascript一些属性和方法不支持（其实不能说是Firefox不支持，而是对不规范的写法不支持，符合标准的写法还是支持的），Firefox 希望程序设计师都采用规范的ECMAScript标准来书写代码，这样一些适应传统习惯的IE下的写法就会撞到很多

的问题。 比如飘 易经常使用的利用JS的InnerHtml属性动态替换广告代码的写法就在Firefox浏览器下不支持了。如飘易的这个文章：网站加载广告大提速，广告不再烦，在Firefox下就不能正确替换了。 原来的代码如 下：

<span id="ad_1"></span>

<SPAN id="ad_11" style="visibility:hidden;">

<script language="JavaScript" src="/js/ad_1.js"></script>

</SPAN>

<SCRIPT>ad_1.innerHTML=ad_11.innerHTML;ad_11.innerHTML="";</SCRIPT>

上 面的代码在IE、chrome等浏览器下可以被正确的执行替换，而在Firefox下就不能。其实解决方法也很简单，就让我们按照ECMAScript规 范写代码即可。上面的代码修正为下面的即可：

<span id="ad_1"></span>

<SPAN id="ad_11" style="visibility:hidden;">

<script language="JavaScript" src="/js/ad_1.js"></script>

</SPAN>

<SCRIPT>document.getElementById("ad_1").innerHTML=document.getElementById("ad_11").innerHTML;document.getElementById("ad_11").innerHTML="";</SCRIPT>

不 要直接使用DIV或SPAN的id，而是通过 document.getElementById("div_id") 来执行替换即可。另 外，Firefox是不支持 innerTEXT 属性的

innerText和innerHTML， outerHTML的更多相关文章

  1. innerHTML outerHTML innerText

      迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...

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

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

  3. jQuery中的text()、html()和val()以及innerText、innerHTML和value

    *jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...

  4. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  5. JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  6. innerText与innerHTML的区别

    innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...

  7. 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  8. javascript总结37:DOM:innerText 和 innerHTML

    innerText 和 innerHTML 作用: 给双标签的元素设置内容/获取双标签里面的内容 不同点: innerText 只是用于获取文本或设置文本 innerHTML 不仅可以用于设置/获取文 ...

  9. jQuery中的text()、html()和val()以及javaScript中的innerText、innerHTML和value

    *jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...

  10. JQuery中 text()、html() 以及 val()以及innerText、innerHTML和value

    设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...

随机推荐

  1. [USACO07FEB] Lilypad Pond

    https://www.luogu.org/problem/show?pid=1606 题目描述 FJ has installed a beautiful pond for his cows' aes ...

  2. 最短路+找规律 Samara University ACM ICPC 2016-2017 Quarterfinal Qualification Contest L. Right Build

    题目链接:http://codeforces.com/gym/101149/problem/L 题目大意:有n个点(其实是n+1个点,因为编号是0~n),m条有向边.起点是0,到a和b两个节点,所经过 ...

  3. phpcms模板

    cms的样式有很多种,我们学习的是phpcms,这些cms都是大同小异,学会了一种就可以使用其它的cms. PHPCMS是一款网站管理软件.该软件采用模块化开发,支持多种分类方式,使用它可方便实现个性 ...

  4. 使用 pjax 载入的新页面，新页面上 类方法 无法被触发？

    在父页面上有定义类似 $(".class").click(function(){ ... }) 经过pjax 载入后的新页面 点击后没有触发事件 在segmentfault 上提问 ...

  5. matlab前景分割

    用最简单的差分法实现了一下前景分割.使用的mall数据集. 思路是这样的:首先设定一个队列的长度,若读取的图片张数少于队列长度则以当前读取到的图片做平均.否则则以队列中的图片做平均. 这样之后和当前图 ...

  6. zabbix 监控服务器的TCP状态

    本文介绍如何监控TCP的11种状态: 1.命令选择: ss or netstat netstat 在 Centos7上已经不再支持,ss 打印基于socket的统计信息,实际运行下来,ss的速度比ne ...

  7. Java爬虫(二)

    上一篇简单的实现了获取url返回的内容,在这一篇就要第返回的内容进行提取,并将结果保存到html中.而且这个爬虫是基于python爬虫的java语言实现,其逻辑大致相同. 一 . 需求: 抓取主页面: ...

  8. 38 - 网络编程-socketserver

    目录 1 socket编程弊端 2 SocketServer模块 2.1 服务器类 2.2 Mixin类 2.3 RequestHandlerClass是啥 2.4 编程接口 3 实现EchoServ ...

  9. 【Git/GitHub学习笔记】一键更新多个git仓库至远程

    因为同时在本地维护几个Github的仓库,每次更新后每个仓库要重复三步提交同步,有点麻烦. 发现可以写.sh文件来实现一键更新. 比如我要更新我的BlogBackup和CodeRepo两个仓库的代码如 ...

  10. 【Linux学习】python脚本直接运行与nohup运行结果不同

    之前遇到问题,在云主机上运行python脚本直接运行与nohup运行结果不同,甚至nohup根本运行不出来. 后来参考下别人的博客,终于知道问题了. nohup 使用的python版本问题. 而且no ...