- 浏览: 600029 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (199)
- 纯java (22)
- 中间件 (1)
- java线程 (1)
- webwork (10)
- HTML/CSS (11)
- struts2 (10)
- mysql (14)
- Linux (8)
- 字符编码和转换 (1)
- WebService (1)
- web (21)
- javascript (33)
- ajax (5)
- 随便写写 (3)
- svn (0)
- eclipse使用技巧 (10)
- Ant (1)
- 互联网发展方向 (1)
- Jquery (12)
- 视频 (2)
- MD5 (1)
- 项目经验总结 (1)
- Oracle (2)
- Netbeans (1)
- Apache/Tomcat (4)
- springside (1)
- hibernate (6)
- SpringSecurity (0)
- java与文件 (1)
- CKEditor (4)
- JSON (3)
- 笔试题 (0)
- 应用部署 (1)
- 杂七杂八 (1)
- android (1)
- jQuery UI (1)
- XML相关技术 (1)
- HTML5 (1)
- CSS3 (0)
- 正则表达式 (1)
- http协议 (3)
- 算法 (5)
- 互联网知识 (1)
最新评论
-
hp321:
我现在遇到一个开发自定义按钮的问题,想请教下你:问题如下:举例 ...
Ckeditor 如何在源码模式下添加可以显现的按钮 -
make1828:
javascript跨域解决方案(一) -
huxianwen:
问题是, ckeditor编辑器在源码模式并不能插入任何代码呀 ...
Ckeditor 如何在源码模式下添加可以显现的按钮 -
nidonglin1986:
虽然解决了问题,但是原因说的不是很明白啊。中文跟HTML标志 ...
struts2的标签在JS中的使用 中文乱码 -
ldw1986hf123:
[*]
JVM工作原理
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>
<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>
-------------------------------------------------------------------------------------------------------------------------------
- <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>
发表评论
-
Javascript的分层概念
2011-12-07 17:27 1308Javascript如何分层: 我们把 ... -
一道诡异的js面试题
2011-11-09 17:46 1928请给出如下两段程序的执行结果: 第一种情况: <sc ... -
JavaScript在IE和Firefox下的兼容性问题
2011-11-09 16:45 1758(一) 问题1:获取一个元素对象的引用,在IE下,可直接使用该 ... -
Jquery性能优化
2011-11-08 15:47 1080之前,我们减少字节数 ... -
雅虎网页优化14条准则
2011-11-04 15:27 1507网站最基本的东西是什么? ——内容?SEO(搜索引擎优化)?U ... -
对String对象进行扩展,使其具有去掉字符串前后空格的方法
2011-11-02 11:27 1865通过正则表达式可以实现题目要求具体代码如下: <htm ... -
前端开发性能优化规范
2011-11-01 11:00 1网站性能优化是一个很综合的话题,涉及到服务器的配置和网站前后端 ... -
javascript跨域解决方案(二)
2011-10-28 16:45 15693.4、iframe+location.hash 这种方法比 ... -
javascript跨域解决方案(一)
2011-10-28 16:42 107831、神马是跨域(Cross Domain) 说白点就是p ... -
如何确保页面中的js加载完全
2011-10-28 11:19 1556如何确定一个js是否加载完全或者页面中的所有js加载完全,具体 ... -
javascript性能优化准则
2011-10-28 10:54 14javascript性能优化准则: 1.将脚本放在底部 2 ... -
js字符串连接性能问题
2011-10-27 21:00 1140大多数情况下,加法运算符是首选;如果用户主要使用IE ... -
javascript闭包概念的理解
2011-10-27 09:17 13411.什么是闭包? 闭包,就是封闭了外部函数作用域中 ... -
点击页面标签弹出 标签名字的两种方式
2011-10-26 15:36 1342第一种解决办法是jquery的方式: <script ... -
JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
2011-10-17 16:25 1503做BS开发就难免会用到ja ... -
javascript异步加载方案
2011-08-02 09:56 5436javascript延迟加载的解决方案: 1.使用defer ... -
Js中的undefined,null,NaN,Bool以及类型判断
2011-07-21 19:35 42191.类型分析: jav ... -
js单引号中嵌套单引号的问题的正确写法
2011-06-16 11:25 3148例如我们要写如下一段代码: this.div.InnerHT ... -
不唐突的JavaScript的七条准则
2011-04-25 11:03 1085经过多年的开发、教学和编写不唐突的JavaScript, 我发 ... -
javascript数组定义
2011-04-21 13:56 1153数组有四种定义的方式 使用构造函数: var a = new ...
相关推荐
### JavaScript中的innerHTML与innerText的用法与区别 在前端开发中,经常需要用到JavaScript来操作DOM元素,其中`innerHTML`和`innerText`是非常重要的属性,它们分别用于获取或设置元素内部的HTML内容和纯文本...
在 JavaScript 中,innerHTML 和 innerText 是两个常用的属性,它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的,但它们在获取内容的方式和结果上有所不同。 innerHTML 属性 innerHTML 属性用于获取 ...
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
在示例中,我们可以看到,innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容,而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...
了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `innerHTML` 属性允许我们获取或设置一个元素的HTML内容,包括所有的HTML标签。例如,在以下代码中: ```html <span style="color:red">test1...
在编程领域,尤其是在Web开发中,常常会遇到与HTML元素操作相关的属性,其中`InnerHtml`和`InnerText`是两种常见的属性,它们在处理网页内容时有着不同的行为和用途。本文将深入探讨这两个属性的区别,并提供详尽的...
总结来说,`innerText`和`innerHTML`是JavaScript中非常实用的属性,通过理解它们的作用和特性,开发者能够更加灵活地处理HTML文档内容。在使用时,选择合适的属性根据实际需要进行操作,是编写有效且安全JavaScript...
根据提供的文件信息,我们可以深入探讨三个重要的DOM属性:`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键,用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...
在javascript中如果我们要获取对象内容,js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里,可能很多人不知道吧,接下来跟着小编一起来学习innerHTML,innerText,...
在JavaScript中,`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性,用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
这就是为什么在`innerHTML`中插入的JS代码不执行的原因。 为了解决这个问题,我们可以采用以下几种方法: 1. **使用`document.createElement`和`element.appendChild`**:这种方法创建和操作DOM元素是安全的,因为...
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个与HTML元素内容操作紧密相关的属性,它们在处理网页元素的文本和HTML结构时具有不同的作用和特点。 1. innerHTML: - innerHTML允许我们获取或...
### JavaScript中innerText与innerHTML的应用详解 在Web开发中,JavaScript是一种非常重要的客户端脚本语言,它可以帮助我们实现页面上的动态效果。在JavaScript中,`innerText`与`innerHTML`是两个非常常用的属性...
document对象中有innerHTML、outerHTML、innerText和outerText四个属性,它们之间的区别和使用方法是开发者必须掌握的知识。 首先,让我们来了解innerHTML和outerHTML这两个属性。innerHTML设置或获取标签所包含的...
4. **与innerText的区别**:`innerText`属性与`innerHTML`相似,但它只返回或设置纯文本,不包含任何HTML标记。这意味着`innerText`在处理文本内容时更安全,但缺乏对HTML结构的控制。 5. **DOM操作的最佳实践**:...