用法：
<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.getElementByIdx_xx_x('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与innerText的用法与区别 在前端开发中，经常需要用到JavaScript来操作DOM元素，其中`innerHTML`和`innerText`是非常重要的属性，它们分别用于获取或设置元素内部的HTML内容和纯文本...
JavaScript 是一种广泛使用的脚本语言，它赋予网页以动态交互性，而 innerHTML 属性是 JavaScript 中非常重要的一个属性，用于获取或修改指定元素的 HTML 内容。这个属性被广泛用于动态地更新网页上的内容。 首先，...
### innerHtml用法精解 #### 一、InnerHtml简介及基本用法 `innerHTML`是HTML DOM（Document Object Model）的一个属性，用于获取或设置某个元素内的HTML内容。使用`innerHTML`，开发者可以直接操作HTML内容，从而...
标题中的"innerHtml（转）"可能是指HTML DOM（Document Object Model）中的一个属性`innerHTML`，这是一个非常关键的概念，特别是在JavaScript中用于处理HTML元素的内容。`innerHTML`允许我们获取或设置HTML元素内部...
在示例中，我们可以看到，innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容，而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...
总结来说，`innerText`和`innerHTML`是JavaScript中非常实用的属性，通过理解它们的作用和特性，开发者能够更加灵活地处理HTML文档内容。在使用时，选择合适的属性根据实际需要进行操作，是编写有效且安全JavaScript...
在这篇文章中，我们将深入理解innerHTML的工作原理，并通过实例代码来展示其用法。 首先，innerHTML属性的工作方式如下： 1. **获取内容**：当你对一个元素调用innerHTML属性时，它会返回该元素内部的所有HTML内容...
在JS中可以使用： test[removed]: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 上例中的test[removed]的值也就是“<span xss=removed>test1</span> test2 ”。 test.innerText: 从起始位置到...
了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `innerHTML` 属性允许我们获取或设置一个元素的HTML内容，包括所有的HTML标签。例如，在以下代码中： ```html <span style="color:red">test1...
在提供的压缩包文件 "innerHTML_outerHTML.htm" 中，很可能是通过实例展示了 `innerHTML` 和 `outerHTML` 的用法，可能包含了一些交互式的例子或者详细的解释。读者可以下载并查看这个文件，以更直观地理解这两个...
JavaScript 中的 AppendChild 和 InsertBefore 用法详细解析 在 JavaScript 中，appendChild 和 insertBefore 是两个常用的方法，用于在 DOM 中插入新的节点。但是，很多开发者对这两个方法的使用和区别不是很清楚...
在本文中，我们将深入探讨`select`的用法，包括如何创建、操作和处理`select`元素的各种事件。 1. **创建基本的`select`元素** ```html <option value="option1">Option 1 <option value="option2">Option 2 ...
我们可以编写 JavaScript 函数来演示这些属性的用法： ```javascript function showInnerHTML() { const div = document.getElementById('test'); alert(div.innerHTML); } function showInnerText() { const ...
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
JavaScript日历控件是一种在网页上显示日期选择器的交互元素，它允许用户方便地选择日期，常用于表单中的日期输入字段。本教程将深入探讨JavaScript日历控件的实现原理、代码结构以及如何在实际项目中应用。 首先，...
在JavaScript中，`document.all`属性是Internet Explorer的专有特性，它允许脚本访问文档中的所有元素。这个属性返回一个对象集合，包含了文档中所有的HTML标签，这为开发者提供了强大的DOM操作能力。 ### `...
HTML标签的innerHTML和value之间的用法的区别