yanqingluo
- 浏览: 166532 次
- 性别:
- 来自: 南京
-
文章分类
- 全部博客 (327)
- JAVA (130)
- 工作笔记 (49)
- SQLSERVER (5)
- ORACLE (28)
- nginx (1)
- Unix C (16)
- 系统 (19)
- 网络技术 (17)
- WEB前端 (22)
- Eclipse (2)
- Tomcat (1)
- spring (7)
- MYSQL (12)
- Maven (6)
- JETTY (2)
- 设计 (2)
- 开源项目 (7)
- asterisk (0)
- C++ (2)
- WINDOWS (2)
- SCALA (0)
- 协议 (1)
- Netty (1)
- SHELL (1)
- mybaits (4)
- 并发 (2)
- 架构 (2)
- TCP/IP (8)
- 虚拟化 (3)
- 不要再说java慢 (0)
- mac (2)
- mysql乱码完美解决 (1)
最新评论
js中 innerHTML与innerText的用法与区别及解决Firefox不支持Js的InnerHtml问题
2010-7-24 16:17:43 信息来源：本站 作者：本站 编辑人:：waitingline 阅读数：167 网友评论:0 条
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 属性的。
2010-7-24 16:17:43 信息来源：本站 作者：本站 编辑人:：waitingline 阅读数：167 网友评论:0 条
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 属性的。
分享到：
发表评论
-
奇怪的事情
2015-03-14 18:50 507我百度查了某东西之后，我看什么都会贴上下面这玩意。 ... -
HTML 字符实体 < >: &等
2014-11-12 08:38 891http://lidongbest5.com/blog/5/ -
v8 引擎相关
2014-10-27 07:22 465http://blog.csdn.net/horkychen/ ... -
Zen Coding: 一种快速编写HTML/CSS代码的方法
2014-10-12 21:07 355Zen Coding: 一种快速编写HTML/CSS代码的方法 ... -
ajax 三种提交请求的方法
2014-09-25 22:31 434http://blueskator.iteye.com/blo ... -
浏览器静态资源的版本控制新思路.强制更新指定资源缓存.的探讨
2014-09-11 17:59 412http://www.cnblogs.com/_franky/ ... -
日历插件
2014-08-07 10:35 372日历插件 http://www.open-open.com/n ... -
关于前端优化的争论
2014-04-12 22:10 385【院士】广州-simon 2014/4/12 21:19:37 ... -
vs2008 js 调试厉器
2014-03-31 15:27 410vs2008 js 调试厉器 http://javadevil ... -
velocity + spring mvc
2014-03-29 12:57 363http://m.blog.csdn.net/blog/sus ... -
格式化 压缩后的JS
2013-11-16 22:45 395http://blog.csdn.net/yenange/ar ... -
闭包的概念和developer.mozilla.org的文档
2013-10-09 22:51 479http://www.jb51.net/article/241 ... -
CSS:background-position
2013-10-03 16:19 343转自http://blog.csdn.net/JeamKing ... -
JAVASCRIPTS
2013-09-30 16:58 327http://www.cnblogs.com/TomXu/ar ... -
语义化HTML标签
2013-09-30 15:53 375语义化HTML标签 一个 ... -
cookie
2013-09-04 21:26 673http://www.jb51.net/article/145 ... -
[转载] Web前端浏览器兼容初探
2013-08-22 10:12 691http://www.cnblogs.com/yexiaoch ... -
CSS 盒模型
2013-08-19 23:16 684http://www.cnblogs.com/yingzi/a ... -
（转） 行内元素 块内元素
2013-08-19 23:12 432以图例来表述行内元素 ... -
（转）DocType 的严格模式与混杂模式
2013-08-19 23:03 354严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。 ...
相关推荐
**四、innerHTML与innerText的区别（demo4）** `innerHTML`和`innerText`都是用于设置或获取HTML元素的文本内容，但它们之间存在差异。`innerHTML`不仅包含文本，还包含元素的HTML结构，可以用来修改或获取HTML代码...
本以为一个 innerHTML replace 就能实现的简单操作，...使用 innerHTML，或 outHTML, 而不能使用 innerText,outText。 const regex = new RegExp(keyword,g) element[removed] = element[removed].replace(regex,<b
在"workout-tracker"中，可能会使用`document.getElementById`, `document.querySelector`或`document.querySelectorAll`来获取页面元素，然后使用`innerHTML`, `innerText`或`textContent`改变元素的内容，`...
- **DOM操作**：利用`document.querySelector`或`document.querySelectorAll`选取页面元素，然后用`innerHTML`或`innerText`更新页面内容。 - **条件语句**：根据卡片的花色和数字执行不同的锻炼动作。 - **可能的库...
在Java JSP中，`<c:out>`标签用于输出变量值，同时可以防止XSS（跨站脚本攻击）。默认情况下，它会自动转义特殊字符。但是，如果你不想转义，可以设置`escapeXml`属性为`false`。 ```jsp <c:out value="${...
然后将这些信息添加到提示框内，使用`innerHTML`或`innerText`属性设置文本内容。 4. **定位提示框**：为了让提示框准确地显示在鼠标下方，我们需要计算元素的位置和屏幕尺寸。可以使用`getBoundingClientRect`方法...
可以使用`document.createElement`创建新的HTML元素，如`div`，作为悬浮块，并使用`innerHTML`或`innerText`属性填充内容。然后使用`appendChild`或`insertBefore`将其添加到页面的适当位置。 ```javascript var ...
- **DOM属性**：如`innerHTML`、`innerText`、`parentNode`等，用于读写元素内容和结构。 **5. 附录** 附录部分通常会包含更详细的技术参考，例如： - **浏览器兼容性**：列出不同浏览器对DHTML特性的支持情况，...
- DOM操作：通过getElementById，getElementsByClassName，querySelector等方法获取DOM元素，然后使用innerHTML，innerText，style等属性进行内容修改或样式设置。 - 事件处理：addEventListener和...
- 属性操作：改变元素的属性值，如innerHTML、innerText、style等。 - 事件绑定：学习addEventListener和removeEventListener来添加和移除事件监听器。 3. **事件处理** - 事件：了解鼠标事件（click、mouseover...
alert(document.getElementById('myH2').innerHTML); parent.document.getElementById('myH2').innerText = "hello, my friend"; }; ``` #### 三、IFrame的高级应用 IFrame不仅可以用来展示静态内容，还可以实现...
常见的DOM操作包括选择元素（getElementById、querySelector、querySelectorAll等）、修改属性（innerHTML、innerText、style等）和事件处理（addEventListener、removeEventListener）。 3. **AJAX**：...
document.getElementById('test').contentDocument.getElementById('myH1').innerText = "hello, my dear"; ``` 2. **父文档与子文档之间的通信**： 当需要在Iframe所在的父文档与Iframe本身之间进行交互时，...
5. 修改节点：可以通过更改节点的属性（如`innerHTML`或`innerText`）来修改内容，或使用`setAttribute()`修改属性。 【DOM事件】 DOM事件允许开发者对用户交互或浏览器行为做出响应。常见的DOM事件有： 1. 鼠标...
例如，可以使用`document.getElementById()`或`document.querySelector()`找到特定元素，然后用`innerHTML`、`innerText`等属性改变元素内容。 7. **JSON数据格式**：虽然Ajax名字中有XML，但现代Web开发中，JSON...
1. **DOM操作**：使用`document.getElementById`或`querySelector`等方法获取元素，`innerHTML`或`innerText`属性来读取或修改元素内容，以及`style`属性来设置CSS样式，如`left`或`right`来调整元素位置。...
- 事件类型：常见的有'click'、'mouseover'、'mouseout'等，可以根据需要绑定。 6. **DOM操作进阶** - `createDocumentFragment()`：创建一个文档碎片，用于高效地批量添加元素。 - `cloneNode()`：复制节点及其...
document.body.innerHTML = i; i--; setTimeout("out(" + i + ")", 1000); } <body onload="out(5)"> ``` 此段代码中定义了一个名为`out`的函数，该函数接收一个参数`obj`表示倒计时的初始值。函数内部通过...
(window.frames['tt'].document.getElementById('myH1').innerHTML)"> <iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe> <h1 id="myH2">hello,mywife ``` ...