innerText和innerHTML， outerHTML
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的更多相关文章
- innerHTML outerHTML innerText
迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...
- JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用
value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...
- jQuery中的text()、html()和val()以及innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）
window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...
- innerText与innerHTML的区别
innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...
- 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- javascript总结37:DOM:innerText 和 innerHTML
innerText 和 innerHTML 作用: 给双标签的元素设置内容/获取双标签里面的内容 不同点: innerText 只是用于获取文本或设置文本 innerHTML 不仅可以用于设置/获取文 ...
- jQuery中的text()、html()和val()以及javaScript中的innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...
- JQuery中 text()、html() 以及 val()以及innerText、innerHTML和value
设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...
随机推荐
- NOIP模拟赛16
NOIP2017金秋冲刺训练营杯联赛模拟大奖赛第一轮Day2 期望得分:100+100+ =200+ 实际得分:100+40+70=210 T1天天寄快递 直接模拟,代码丢了...... T2天天和不 ...
- 课程设计——利用信号量实现生产者-消费者问题（java）
package cn.Douzi.ProductConsume; import java.util.LinkedList; import java.util.Queue; import java.ut ...
- linux中操作数据库的使用命令记录
1,mysql 查看数据库表编码格式: show create table widget; 修改数据库表编码格式: alter table widget default character set u ...
- 重构改善既有代码设计--重构手法19：Replace Data Value with Object （以对象取代数据值）
你有一笔数据项(data item),需要额外的数据和行为. 将这笔数据项变成一个对象. class Order... private string customer; ==> class Or ...
- C语言实现线性表(链式存储方式)
#include <stdio.h> #include <stdlib.h> //提供malloc()原型 typedef struct LNode *List; typede ...
- HDU 1754 I Hate It (线段树）
题目链接 Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老 ...
- webpack中的静态资源处理
你可能已经注意到,在我们的项目结构里,有两个静态文件的路径,分别是:src/assets 和 static/.那这两个到底有什么区别呢? Webpacked 资源 为了回答这个问题,我们首先需要理解w ...
- dev_alloc_skb(len+16) skb_reserve(skb,2) skb_put(skb,len)
/** * dev_alloc_skb - allocate an skbuff for receiving * @length: length to allocate * * ...
- memcached安装【转】
1.安装依赖软件 # yum -y install libevent libevent-devel perl-Test-Harness perl-Time-HiRes perl-TermReadKey ...
- [How to] MapReduce on HBase ----- 简单二级索引的实现
1.简介 MapReduce计算框架是二代hadoop的YARN一部分,能够提供大数据量的平行批处理.MR只提供了基本的计算方法,之所以能够使用在不用的数据格式上包括HBase表上是因为特定格式上的数 ...