用法：
<divid="test">
<spanstyle="color:red">test1</span>test2
</div>
在JS中可以使用：
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<spanstyle="color:red">test1</span>test2 ”。
test.innerText:
从起始位置到终止位置的内容,但它去除Html标签
上例中的text.innerTest的值也就是“test1test2”,其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外,还包含对象标签本身。
上例中的text.outerHTML的值也就是<divid="test"><spanstyle="color:red">test1</span>test2</div>
完整示例：
<divid="test">
<spanstyle="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代码至关重要。 `innerHTML` 属性允许我们获取或设置一个元素的HTML内容，包括所有的HTML标签。例如，在以下代码中： ```html <span style="color:red">test1...
.innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型（DOM）中四个常用的属性，它们都是用来操作HTML元素的内容的，但它们之间有着很大的区别...
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，...
这就是为什么在`innerHTML`中插入的JS代码不执行的原因。 为了解决这个问题，我们可以采用以下几种方法： 1. **使用`document.createElement`和`element.appendChild`**：这种方法创建和操作DOM元素是安全的，因为...
总结来说，`innerText`和`innerHTML`是JavaScript中非常实用的属性，通过理解它们的作用和特性，开发者能够更加灵活地处理HTML文档内容。在使用时，选择合适的属性根据实际需要进行操作，是编写有效且安全JavaScript...
根据提供的文件信息，我们可以深入探讨三个重要的DOM属性：`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键，用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个与HTML元素内容操作紧密相关的属性，它们在处理网页元素的文本和HTML结构时具有不同的作用和特点。 1. innerHTML： - innerHTML允许我们获取或...
4. **与innerText的区别**：`innerText`属性与`innerHTML`相似，但它只返回或设置纯文本，不包含任何HTML标记。这意味着`innerText`在处理文本内容时更安全，但缺乏对HTML结构的控制。 5. **DOM操作的最佳实践**：...
内文基于innerHTML的跨浏览器innerText函数，带有替换项。 innerText是一个功能，不是标准化的，但支持Chrome和IE。 Firefox没有。 有多种方法可以实现innerText功能。 您可以获取一个选择window.getSelection() ，...
innerText 和 innerHTML 是JavaScript中用于操作HTML元素内容的两个重要属性。它们允许开发者动态地修改网页上元素的文本或HTML结构。理解它们的区别和用法对于网页开发至关重要。 一、innerText 属性 innerText ...
#### 三、InnerText与InnerHTML的区别 `innerText`与`innerHTML`都是用来获取或设置元素的文本内容，但它们之间存在一些关键区别： - **innerText**：仅获取或设置纯文本内容，忽略所有HTML标签。 - **innerHTML**...
在实际开发中，大多数情况下，`innerHTML`经过简单的处理就能提供与`innerText`相似的效果，对于大部分需求来说已经足够。但了解`textContent`和`innerText`之间的差异，可以帮助开发者更好地理解浏览器如何处理文本...
这些知识点涵盖了 JavaScript 中的基本数据类型、堆栈数据结构、变量声明提升、异步编程、事件流和事件冒泡、清除定时器、添加 DOM 对象到 body 中、innerHTML 和 innerText 区别、Window 对象等方面。
总之，理解`innerHTML`的工作原理以及如何正确处理动态生成的DOM元素与事件绑定是JavaScript开发中的重要技能。在遇到类似问题时，应当灵活运用各种DOM操作方法和事件处理策略，以确保功能的正常运行。
#### 三、`.innerText`与`.innerHTML`的区别 1. **返回内容**： - `.innerText`返回的是纯文本内容，不包含任何HTML标签。 - `.innerHTML`返回的是完整的HTML内容，包括所有子节点的HTML结构。 2. **浏览器兼容...