`

js中innerHTML与innerText的用法与区别

 
阅读更多

用法:

<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.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>

文章转载于:http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.aspx

分享到:
评论

相关推荐

    innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `innerHTML` 属性允许我们获取或设置一个元素的HTML内容,包括所有的HTML标签。例如,在以下代码中: ```html &lt;span style="color:red"&gt;test1...

    innerHTML、outerHTML、innerText、outerText的用法与区别

    .innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型(DOM)中四个常用的属性,它们都是用来操作HTML元素的内容的,但它们之间有着很大的区别...

    JavaScript中innerHTML,innerText,outerHTML的用法及区别

    在javascript中如果我们要获取对象内容,js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里,可能很多人不知道吧,接下来跟着小编一起来学习innerHTML,innerText,...

    javascript中innerText和innerHTML属性用法实例分析

    总结来说,`innerText`和`innerHTML`是JavaScript中非常实用的属性,通过理解它们的作用和特性,开发者能够更加灵活地处理HTML文档内容。在使用时,选择合适的属性根据实际需要进行操作,是编写有效且安全JavaScript...

    innerHTML-outerHTML-innerTEXT.txt

    根据提供的文件信息,我们可以深入探讨三个重要的DOM属性:`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键,用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...

    innerHTML,outerHTML,innerText,outerText的用法及区别解析

    在JavaScript中,`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性,用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...

    javascript innerHTML、outerHTML、innerText、outerText的区别

    JavaScript中的innerHTML、outerHTML、innerText和outerText是四个与HTML元素内容操作紧密相关的属性,它们在处理网页元素的文本和HTML结构时具有不同的作用和特点。 1. innerHTML: - innerHTML允许我们获取或...

    innerHtml(转)

    4. **与innerText的区别**:`innerText`属性与`innerHTML`相似,但它只返回或设置纯文本,不包含任何HTML标记。这意味着`innerText`在处理文本内容时更安全,但缺乏对HTML结构的控制。 5. **DOM操作的最佳实践**:...

    inner-text:基于innerHTML的innerText函数,带有替换项

    内文基于innerHTML的跨浏览器innerText函数,带有替换项。 innerText是一个功能,不是标准化的,但支持Chrome和IE。 Firefox没有。 有多种方法可以实现innerText功能。 您可以获取一个选择window.getSelection() ,...

    innerText innerHTML的用法以及注意事项 [推荐]

    innerText 和 innerHTML 是JavaScript中用于操作HTML元素内容的两个重要属性。它们允许开发者动态地修改网页上元素的文本或HTML结构。理解它们的区别和用法对于网页开发至关重要。 一、innerText 属性 innerText ...

    innerHtml用法精解

    #### 三、InnerText与InnerHTML的区别 `innerText`与`innerHTML`都是用来获取或设置元素的文本内容,但它们之间存在一些关键区别: - **innerText**:仅获取或设置纯文本内容,忽略所有HTML标签。 - **innerHTML**...

    javascript textContent与innerText的异同分析

    在实际开发中,大多数情况下,`innerHTML`经过简单的处理就能提供与`innerText`相似的效果,对于大部分需求来说已经足够。但了解`textContent`和`innerText`之间的差异,可以帮助开发者更好地理解浏览器如何处理文本...

    JavaScript 50道面试题及答案.docx

    这些知识点涵盖了 JavaScript 中的基本数据类型、堆栈数据结构、变量声明提升、异步编程、事件流和事件冒泡、清除定时器、添加 DOM 对象到 body 中、innerHTML 和 innerText 区别、Window 对象等方面。

    调用innerHTML之后onclick失效问题的解决方法

    总之,理解`innerHTML`的工作原理以及如何正确处理动态生成的DOM元素与事件绑定是JavaScript开发中的重要技能。在遇到类似问题时,应当灵活运用各种DOM操作方法和事件处理策略,以确保功能的正常运行。

    js获取html的span标签的值方法.docx

    #### 三、`.innerText`与`.innerHTML`的区别 1. **返回内容**: - `.innerText`返回的是纯文本内容,不包含任何HTML标签。 - `.innerHTML`返回的是完整的HTML内容,包括所有子节点的HTML结构。 2. **浏览器兼容...

Global site tag (gtag.js) - Google Analytics