<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> 共同点:innerHTML和innerText都会把元素内内容替换掉。
不同点:
1,innerHTML:
  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。   上例中的test.innerHTML的值也就是“<span style="color:red">test1</span>
test2 ”。
2,innerText:
  从起始位置到终止位置的内容, 但它去除Html标签   上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。 值得注意的是,innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。

innertext与innerhtml的更多相关文章

  1. jQuery中的text()、html()和val()以及innerText、innerHTML和value

    *jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...

  2. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  3. JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  4. innerText与innerHTML的区别

    innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...

  5. 从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. javascript总结37:DOM:innerText 和 innerHTML

    innerText 和 innerHTML 作用: 给双标签的元素设置内容/获取双标签里面的内容 不同点: innerText 只是用于获取文本或设置文本 innerHTML 不仅可以用于设置/获取文 ...

  7. jQuery中的text()、html()和val()以及javaScript中的innerText、innerHTML和value

    *jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...

  8. JQuery中 text()、html() 以及 val()以及innerText、innerHTML和value

    设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...

  9. jQuery中怎么添加innerText、innerHtml(转)

    发现如果我在div或者其他非表单的标签中赋值,原本用普通的js就直接document.getElementById("id").innerHtml(或者其他几个)就可以了. 但是在 ...

随机推荐

  1. MINIX3 进程调度分析

    MINIX3 进程调度分析  5.1MINIX3 进程调度概要  MINIX3 的进程调度还是非常简单的,调度算法是非常短小的,其目的就是体现 了一个简单和高效的设计原则,当然简单和高效其实很难并存, ...

  2. Day06_面向对象第一天

    1.JAVA中的参数传递问题(掌握)      基本类型 形式参数的改变对实际参数没有影响 基本类型的实际参数和形式参数可以看作两个变量,这两个变量分别操作各自的数据,所以互不影响       引用类 ...

  3. 【题解】【数组】【Prefix Sums】【Codility】Genomic Range Query

    A non-empty zero-indexed string S is given. String S consists of N characters from the set of upper- ...

  4. OpenvSwitch架构

    Openvswitch的架构 数据库结构和OVS-VSCTL # ps aux | grep openvswitch root      1117  0.0  0.0  21200  1580 ?   ...

  5. 支持 Firefox、Chrome 等主流浏览器的全站变灰 CSS 代码

    <style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...

  6. java apache commons HttpClient发送get和post请求的学习整理(转)

    文章转自:http://blog.csdn.net/ambitiontan/archive/2006/01/06/572171.aspx HttpClient 是我最近想研究的东西,以前想过的一些应用 ...

  7. Install Fastx (zz)

    Fastx-toolkit installation on CentOS ===================================== Tested on CentOS release ...

  8. iOS学习笔记---oc语言第十天

    内存管理高级 一 属性的内部实现原理   assign   retain    copy assign 下的属性内部实现 setter方法 @property(nonatomic,assign)NSS ...

  9. SQL注入测试平台 SQLol -3.INSERT注入测试

    访问首页的insert模块,http://127.0.0.1/sql/insert.php,开始对insert模块进行测试. insert语句: INSERT INTO [users] ([usern ...

  10. leetcode 143. Reorder List ----- java

    Given a singly linked list L: L0→L1→-→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→- You must do thi ...