此文主要讲述在使用 innerText 和 innerHTML 获取元素中间值时的差别，我个人将二者的区别简单的理解为：

  1. webelement.innerText : 获取的是页面元素显示的文本
  2. webelement.innerHTML : 获取的是元素中间的 HTML 源码

闲话少述，就此上码。敬请小主参阅，若有不足之处，敬请大神指正，不胜感激！

对应的 HTML 页面源码如下所示：

 <html>

     <head>

         <meta charset='utf-8'>

         <title>JS-003-innerText 与 innerHTML 区别</title>

         <script type="text/javascript" src="common.js"></script>

         <script type="text/javascript" src="test.js"></script>

         <link rel="stylesheet" type="text/css" href="global.css">

     </head>

     <body>

         <div id="jscss">

             <h4>innerText 与 innerHTML 区别</h4>

             <ul>

                 <li>1、改变 HTML 元素的样式语法：document.getElementById(id).style.property=new style</li>

                 <li>2、改变字体颜色：document.getElementById('id1').style.color='red'</li>

                 <li>3、添加属性：btn.children[5].setAttribute("class", "a_class")，class用第一种方法无法添加</li>

                 <li>4、获取&lt;button&gt;标签中间的值：button.innerText</li>

                 <li>5、获取&lt;button&gt;标签的value值：button.value</li>

                 <br>

                 <li>webelement.innerHTML 获取的为元素中间的 HTML 源码</li>

                 <li>webelement.innerText 获取的为页面元素显示的文本</li>

             </ul>

             <input id="ms" type="text">

             <input id="p2" type="button" value="修改字体颜色-1" onclick="modCss()">

             <button id="id1" type="button" onclick="document.getElementById('id1').style.color='red'">修改字体颜色-2</button>

             <button id="cssm" type="button" onclick="cssm()" value="button 样式修改 value"><a>样式修改</a></button>

         </div>

         <div>

             <br><br><br><br>

             <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>

         </div>

     </body>

 </html>

上述页面源码中涉及的 modCss() 函数源码如下所示：

 function modCss(){

     document.getElementById("p2").style.color="blue";

 }

上述页面源码中涉及的 cssm() 函数源码如下所示：

 function cssm(){

     var input = document.getElementById("ms");

     // 文本框赋值

     input.value = "文本框赋值";

     // 修改文本框中字体颜色

     input.style.color = "red";

     // 设置背景色

     input.style.backgroundColor = "gray";

     // 修改文本框边框大小、颜色

     input.style.border = "4px solid blue";

     // 修改文本框对齐方式

     input.style.textAlign = "center";

     alert("input.value : " + document.getElementById("ms").value +  "\n" +

           // 火狐和 chrome 均支持获取 button 的 value

           "button.value : " + document.getElementById("cssm").value + "\n" +

           // 火狐和 chrome 均支持获取 button 的 innerHTML

           "button.innerHTML : " + document.getElementById("cssm").innerHTML + "\n" +

           // 火狐不支持 innertText 的 innerText 获取方式，Chrome 支持

           "button.innerText : " + document.getElementById("cssm").innerText);

 }

点击 样式修改 按钮弹出的信息如下所示，从中可以明显的看出 innerText 与 innerHTML 的区别。

其中 HTML 第26、27 行修改按钮 修改字体颜色-1 和 修改字体颜色-2 的 js 脚本是一致的，区别主要在于实现样式修改的方式：一个是调用的函数，一个是直接将函数写在了对应的属性之上（当功能实现非常简单时可以这样写，较复杂的 js 脚本不建议）。

至此， JS-003-innerText 与 innerHTML 区别 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

JS-003-innerText 与 innerHTML 区别的更多相关文章

  1. js中innerText/value/innerHTML三个属性的区别

    在做一个两个窗口之间的简单信息交互时遇见了一点问题,导致信息无法正常的传递. 最后发现问题是在innerText和value这两个属性上,先简单的总结记录一下几个相似的属性的作用: 1.innerTe ...

  2. [原]innerText与innerHTML区别

    window.onload = function () {             document.getElementById('btn1').onclick = function () {    ...

  3. JS的innerText和innerHTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. innerText与innerHTML的区别

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

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

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

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

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

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

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

  8. JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）

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

  9. 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性

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

随机推荐

  1. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  2. requirejs模块化框架用法分享

      我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一 ...

  3. Area Under roc Curve(AUC)

    AUC是一种用来度量分类模型好坏的一个标准. ROC分析是从医疗分析领域引入了一种新的分类模型performance评判方法. ROC的全名叫做Receiver Operating Character ...

  4. hdu How to Type

    感觉这道dp题还是有点技巧的,此题设置了两个数组:open[]和close[],分别用来记录capslock一直开启状态和一直关闭状态下的最少输入次数.此时只要判断字母的大小写,选用最优子结构即可.状 ...

  5. 【GK101 谐波数据生成器】上位机软件升级（版本：1.1）

    ============================= 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:ht ...

  6. 分布式缓存（Cache）

    1. 单层分布式cache. 如memcache. 2. 多层分布式cache. 服务端和调用者本地都存放cache, 使用udp组播解决cache同步更新问题,但不可靠. 3. 改进的多层分布式ca ...

  7. thread、operation、GCD

    // ViewController.m #import "ViewController.h" @interface ViewController () { //任务队列,能够自动管 ...

  8. 综合支撑【恶灵附身 Psycho Break】的世界观的概念艺术

    综合支撑[恶灵附身  Psycho Break]的世界观的概念艺术 三上真司监督提出的,是对着重表现讲述内心恐怖的哪个世界观的创作和统一做了很大贡献的概念艺术. 这里以他经手的艺术为例,来看看稀少的恐 ...

  9. MVC4发布到IIS7报404错误

    在MVC根目录的web.config中添加 <system.webServer> <modules runAllManagedModulesForAllRequests=" ...

  10. selenium弹窗关闭

    经历了两天的摸索,终于能把弹窗关闭.定位弹窗关闭按钮也尝试了直接用id 定位,class name定位,css_selector定位,连Xpath定位也用上了,但还是关闭不了. 分析其中原因:程序过程 ...