getElementById().innerHTML与getElementById().value的区别


Posted in Javascript onOctober 27, 2016

因为总有新手朋友问这个问题,所以三水点靠木小编特整理一下方法需要的朋友。

简单来说:表单用value,插入字符用innerHTML

比如<input type="text" value="" id="3water" />

有value属性的标签才能使用getElementById("3water").value
像<div id="3water">12345</div>

这种没有value属性的标签就用getElementById("3water").innerHTML

你使用document.getElementById()可以取到页面上一个有id的元素
然后访问这个元素的属性,比如value

当一个元素有value属性的时候,其value才会有值
例1
<input type="text" id="txt1" value="hello"/>
这样一个元素,当你使用document.getElementById("txt1").value时,可以得到其value值,即"hello"这个字符串。

如果一个元素没有value值,那么使用document.getElementById().value时是取不到。这是理所当然的,没有的东西怎么访问?
比如一个div标记,就不一定有value值。

innerHTML
这个是指元素中的内容
例2

一个元素有起始标记和结束标记如

<label id="lb1">this is a label</label>

当你使用document.getElementById("lb1").innerHTML可以取到<label>与</label>之间的内容,即“this is a label”。

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
JS模板实现方法
Apr 03 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
不使用script导入js文件的几种方法
Oct 27 #Javascript
JSON 必知必会 观后记
Oct 27 #Javascript
使用JSON作为函数的参数的优缺点
Oct 27 #Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 #Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 #Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 #Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 #Javascript
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
做网页的一些技巧
2007/02/01 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python matplotlib库的基本使用
2020/09/23 Python
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
团委竞选演讲稿
2014/04/24 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
师范生见习自我总结
2015/06/23 职场文书
高中军训感想
2015/08/07 职场文书
数学备课组工作总结
2015/08/12 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书