innerText、innerHTML与outerHTML、outerText的区别 实例详解
1.x.innerHTML: 从对象的起始位置到终止位置的全部内容,包括Html标签。
2.x.innerText: 从对象的起始位置到终止位置的内容, 去除Html标签。
3.x.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。
看实例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<div id="div">
<input name="button" value="Button" type="button">
<font color="green">
<h2>This is a DIV!</h2>
</font>
</div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
</BODY>
</HTML>
上例中 x.innerHTML 的值也就是“<span style=”color:red”>z1</span> z2 ”。
上例中 x.innerTest 的值也就是“z1 z2”, 其中span标签被去除了。
上例中 x.outerHTML 的值也就是<div id=”x”><span style=”color:red”>z1</span> z2</div> 。
特别说明：
innerHTML符合W3C标准，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('x').innerHTML.replace(/<.+?>/gim,''))">无HTML标签,符合W3C标准</a>
- 大小: 5.4 KB
分享到：
相关推荐
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
.innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型（DOM）中四个常用的属性，它们都是用来操作HTML元素的内容的，但它们之间有着很大的区别...
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
理解 outerText, innerText, innerHTML, outerHTML 的区别和使用场景 outerText, innerText, innerHTML, outerHTML 是 HTML 元素的四种不同的属性，它们之间有着细微的区别，理解它们的区别和使用场景对于前端...
document对象中有innerHTML、outerHTML、innerText和outerText四个属性，它们之间的区别和使用方法是开发者必须掌握的知识。 首先，让我们来了解innerHTML和outerHTML这两个属性。innerHTML设置或获取标签所包含的...
innerText属性和outerText属性在读取元素节点的文本内容时，得到的值是不一样的。它们的不同之处在于设置一个节点的文本属性时，outerText属性会使得原来的元素节点被文本节点替换掉。注意，innerText是非标准属性，...
outerText和outerHTML与innerText和innerHTML类似，但它们同时影响元素自身以及其内部内容。outerText会获取或设置一个元素及其所有后代的文本，而outerHTML则会获取或设置元素及其内容的完整HTML表示。 通过了解...
非常小巧实用的网页解析类，在delphi 10.2下编译通过，主要方法：getElementByid getElementsByTagName(aTag : string) getElementByTagNameAndFlag getElementsByClassName 标签主要属性：innerText ， innerHTML ...
学习笔记Web知识说明深入JavaScript知识水平了解概念懂得使用实例输出总结亲自实现HTTP缓存 https状态码200201创建的206、300304不是Mo，400、500 HTTPS 网络路径参考协议相对网址HTML DOM操作innerHtml，outerHtml...
- `innerText` 和 `outerText`：用于获取或修改元素的文本内容。 - `insertAdjacentHTML` 和 `insertAdjacentText`：用于在指定位置插入 HTML 或文本。 #### 字符串处理 字符串是 JavaScript 中常见的数据类型，...
(2) 对象的定义与实例化 15 (3) 对象的作用域 16 JavaScript对象只有公用作用域 16 JavaScript对象没有静态作用域 16 关键字this 16 (4) 定义类或对象的方法 16 工厂方式 16 构造函数方式和原型方式 ...
在 Web 开发中，JavaScript 作为一种强大的客户端脚本语言，被广泛用于实现网页的动态效果与交互性。通过 JavaScript，开发者可以轻松地操作 HTML 文档中的各种元素（标签），从而实现丰富的用户体验。本文将详细...
- IE有innerText, outerText, outerHTML，FF没有，可以使用textContent和innerHTML。 - FF有HTMLElement, HTMLDivElement等接口，而IE没有。 - IE使用ActiveXObject创建XMLHttpRequest，FF使用原生的XMLHttpRequest...
31. outerHTML/outerText：设置或获取Div元素及其所有子元素的HTML代码或纯文本。 32. ownerDocument：获取与Div元素相关的文档对象。 33. parentElement/parentNode：获取Div元素的父级元素和节点。 34. ...