- 浏览: 164247 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (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 502我百度查了某东西之后,我看什么都会贴上下面这玩意。 ... -
HTML 字符实体 < >: &等
2014-11-12 08:38 883http://lidongbest5.com/blog/5/ -
v8 引擎相关
2014-10-27 07:22 458http://blog.csdn.net/horkychen/ ... -
Zen Coding: 一种快速编写HTML/CSS代码的方法
2014-10-12 21:07 348Zen Coding: 一种快速编写HTML/CSS代码的方法 ... -
ajax 三种提交请求的方法
2014-09-25 22:31 428http://blueskator.iteye.com/blo ... -
浏览器静态资源的版本控制新思路.强制更新指定资源缓存.的探讨
2014-09-11 17:59 406http://www.cnblogs.com/_franky/ ... -
日历插件
2014-08-07 10:35 365日历插件 http://www.open-open.com/n ... -
关于前端优化的争论
2014-04-12 22:10 378【院士】广州-simon 2014/4/12 21:19:37 ... -
vs2008 js 调试厉器
2014-03-31 15:27 405vs2008 js 调试厉器 http://javadevil ... -
velocity + spring mvc
2014-03-29 12:57 359http://m.blog.csdn.net/blog/sus ... -
格式化 压缩后的JS
2013-11-16 22:45 389http://blog.csdn.net/yenange/ar ... -
闭包的概念和developer.mozilla.org的文档
2013-10-09 22:51 475http://www.jb51.net/article/241 ... -
CSS:background-position
2013-10-03 16:19 341转自http://blog.csdn.net/JeamKing ... -
JAVASCRIPTS
2013-09-30 16:58 319http://www.cnblogs.com/TomXu/ar ... -
语义化HTML标签
2013-09-30 15:53 372语义化HTML标签 一个 ... -
cookie
2013-09-04 21:26 669http://www.jb51.net/article/145 ... -
[转载] Web前端浏览器兼容初探
2013-08-22 10:12 684http://www.cnblogs.com/yexiaoch ... -
CSS 盒模型
2013-08-19 23:16 677http://www.cnblogs.com/yingzi/a ... -
(转) 行内元素 块内元素
2013-08-19 23:12 425以图例来表述行内元素 ... -
(转)DocType 的严格模式与混杂模式
2013-08-19 23:03 346严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。 ...
相关推荐
**四、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 ``` ...