JS-003-innerText 与 innerHTML 区别
此文主要讲述在使用 innerText 和 innerHTML 获取元素中间值时的差别，我个人将二者的区别简单的理解为：
- webelement.innerText : 获取的是页面元素显示的文本
- 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、获取<button>标签中间的值：button.innerText</li>
<li>5、获取<button>标签的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 区别的更多相关文章
- js中innerText/value/innerHTML三个属性的区别
在做一个两个窗口之间的简单信息交互时遇见了一点问题,导致信息无法正常的传递. 最后发现问题是在innerText和value这两个属性上,先简单的总结记录一下几个相似的属性的作用: 1.innerTe ...
- [原]innerText与innerHTML区别
window.onload = function () { document.getElementById('btn1').onclick = function () { ...
- JS的innerText和innerHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- innerText与innerHTML的区别
innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- jQuery中的text()、html()和val()以及innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...
- jQuery中的text()、html()和val()以及javaScript中的innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...
- JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）
window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...
- 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
随机推荐
- COJ970 WZJ的数据结构（负三十）
WZJ的数据结构(负三十) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 给你一棵N个点的无根树,点和边上均有权值.请你设计 ...
- mybatis 调用存储过程 返回游标 实例
存储过程示例: create or replace procedure Fsp_Plan_CheckPrj(v_grantno varchar2, v_deptcode number, v_curso ...
- JAVA图片处理--缩放，切割，类型转换
import java.io.*; import java.awt.*; import java.awt.image.*; import java.awt.Graphics; import java. ...
- Spring动态配置多数据源
Spring动态配置多数据源,即在大型应用中对数据进行切分,并且采用多个数据库实例进行管理,这样可以有效提高系统的水平伸缩性.而这样的方案就会不同于常见的单一数据实例的方案,这就要程序在运行时根据当时 ...
- iPhone开发常问的十个问题
iPhone开发常问的十个问题 前言 今天去stackoverflow.com上看了一下iPhone标签下排名最高的10个问题,将它们整理出来,希望这些常见问题能帮到一些iPhone开发的初学者.本来 ...
- hdu Can you find it
这道题也是道二分的题,主要有几个注意点: 1.两个数组的合并的问题,可以将a数组和b数组合并,这样可以降低时间复杂度. 2.二分查找的left和right的变化问题.之前这里一直wa...一定要是le ...
- JQuery asp.net 简单入门
1.A标签 <a href="javascript:setURL('Invelogin.aspx');">Login.aspx</a> <a href ...
- Html - 浮动的云朵
http://www.17sucai.com/download/9006.html @-webkit-keyframes animate-cloud { from { background-posit ...
- 将MyApp.exe和Autorun.lnk添加到NK里，在project.bib文件内加入
1. 将应用程序和应用程序快捷方式添加到映像里,再将快捷方式添加到StartUp目录下,这样当系统运行后应用程序就能自动运行:2. 直接替换Wince的SHELL,即修改注册表: [HKEY_LOCA ...
- X-Japan
听X Japan这么久,几位大叔还是没有认清,真是惭愧. X-Japan是日本著名的视觉系摇滚乐队.原来叫X,在1992年8月HEATH入团的同时改名为X JAPAN. 乐队成立于1982年1月,19 ...