用法:
<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之间的用法的区别