`
jiangzhenghua
  • 浏览: 600998 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js中innerHTML、outHTML和innerText的用法与区别

 
阅读更多

js中innerHTML与innerText的用法与区别

用法:

Java代码 复制代码 收藏代码
  1. <div id="test">   
  2.    <span style="color:red">test1</span> test2   
  3. </div>  
<div id="test">
   <span style="color:red">test1</span> test2
</div>


在JS中可以使用:

Java代码 复制代码 收藏代码
  1. test.innerHTML:  
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>


完整示例:

Java代码 复制代码 收藏代码
  1. <div id="test">   
  2.    <span style="color:red">test1</span> test2   
  3. </div>   
  4.   
  5. <a href="javascript:alert(test.innerHTML)">innerHTML内容</a>   
  6. <a href="javascript:alert(test.innerText)">inerHTML内容</a>   
  7. <a href="javascript:alert(test.outerHTML)">outerHTML内容</a>  
<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>

-------------------------------------------------------------------------------------------------------------------------------

Java代码 复制代码 收藏代码
  1. <html>   
  2. <head></head>   
  3. <frameset frameborder="yes" frameborder="1" rows="40%,*">   
  4. <frame name="top" src="1.html">   
  5. <frame name="bottom" src="2.html">   
  6. </frameset>   
  7. </html>   
  8.   
  9. <html>   
  10. <head>   
  11. <script language="javascript">   
  12. function init()   
  13. {       
  14.     var aaa = parent.window.frames[0].document.body.innerHTML;    
  15.     alert(aaa);   
  16. }   
  17. </script>   
  18. </head>   
  19. <body>   
  20. <p align="center">nothing</p>   
  21. <p align="center"><input type="button" onclick="init()"; value="click"></p>   
  22. </body>   
  23. </html>   
  24.   
  25. <html>   
  26. <center>汽车 房产 女人</center>   
  27. </html>  
分享到:
评论

相关推荐

    js中innerHTML与innerText的用法与区别

    ### JavaScript中的innerHTML与innerText的用法与区别 在前端开发中,经常需要用到JavaScript来操作DOM元素,其中`innerHTML`和`innerText`是非常重要的属性,它们分别用于获取或设置元素内部的HTML内容和纯文本...

    innerHTML和innerText的区别

    在 JavaScript 中,innerHTML 和 innerText 是两个常用的属性,它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的,但它们在获取内容的方式和结果上有所不同。 innerHTML 属性 innerHTML 属性用于获取 ...

    html innerHTML outerHTML innerText outerText等的区别及实例汇总

    html js innerHTML outerHTML innerText outerText 等的区别及实例汇总

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

    在示例中,我们可以看到,innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容,而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...

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

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

    InnerHtml和InnerText的区别分析

    在编程领域,尤其是在Web开发中,常常会遇到与HTML元素操作相关的属性,其中`InnerHtml`和`InnerText`是两种常见的属性,它们在处理网页内容时有着不同的行为和用途。本文将深入探讨这两个属性的区别,并提供详尽的...

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

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

    innerHTML-outerHTML-innerTEXT.txt

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

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

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

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

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

    关于在innerHTML中JS不执行的问题

    这就是为什么在`innerHTML`中插入的JS代码不执行的原因。 为了解决这个问题,我们可以采用以下几种方法: 1. **使用`document.createElement`和`element.appendChild`**:这种方法创建和操作DOM元素是安全的,因为...

    javascript innerHTML、outerHTML、innerText、outerText的区别

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

    javascript innerText和innerHtml应用

    ### JavaScript中innerText与innerHTML的应用详解 在Web开发中,JavaScript是一种非常重要的客户端脚本语言,它可以帮助我们实现页面上的动态效果。在JavaScript中,`innerText`与`innerHTML`是两个非常常用的属性...

    详谈innerHTML innerText的使用和区别

    document对象中有innerHTML、outerHTML、innerText和outerText四个属性,它们之间的区别和使用方法是开发者必须掌握的知识。 首先,让我们来了解innerHTML和outerHTML这两个属性。innerHTML设置或获取标签所包含的...

    innerHtml(转)

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

Global site tag (gtag.js) - Google Analytics