最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Javascript中outerHTML、innerHTML和innerText区别详解
时间：2013-06-24 编辑：简简单单 来源：一聚教程网
示例代码：
| 代码如下 | 复制代码 |
|
test1 test2 |
|
在JS中可以使用：
| 代码如下 | 复制代码 |
|
document.getElementById('test').innerHTML: |
|
也就是从test对象的起始位置到终止位置的全部内容,包括其内部的Html标签。
上例中的返回值：test1 test2
| 代码如下 | 复制代码 |
|
|
|
(注：innertext只适用于ie浏览器，所以尽量不要使用innertext)
从起始位置到终止位置的内容, 但它会去除Html标签。
上例中的返回值：test1 test2, 其中span标签被去除了。
| 代码如下 | 复制代码 |
| document.getElementById('test').outerHTML: | |
除了包含innerHTML的全部内容外, 还包含匹配对象标签本身。
上例中的返回值：
test1 test2
Firefox不支持Js的InnerHtml
原来的代码如下：
| 代码如下 | 复制代码 |
上面的代码在IE、chrome等浏览器下可以被正确的执行替换，而在Firefox下就不能。其实解决方法也很简单，就让我们按照ECMAScript规范写代码即可。上面的代码修正为下面的即可：
| 代码如下 | 复制代码 |
|
|
|
不要直接使用DIV或SPAN的id，而是通过 document.getElementById("div_id") 来执行替换即可。另外，Firefox是不支持 innerTEXT 属性的。
相关文章
- mip-html-os 操作系统组件介绍 12-17
- MIP HTML规范说明 MIP HTML规范介绍 12-16
- HTML5使用JavaScript控制＜audio>音频的播放 10-11
- javascript操作HTMLDOM对象模型详解 12-18
- HTML5之Javascript API扩展2 - 地理信息服务 08-08
- 使用JavaScript和DOM创建HTML表格 04-01