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 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
JavaScript继承方式实例
Oct 29 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
js之ajax文件上传
May 13 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
pandas取出重复数据的方法
2019/07/04 Python
详解python中__name__的意义以及作用
2019/08/07 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Python 如何展开嵌套的序列
2020/08/01 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
车间核算员岗位职责
2014/07/01 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
改进工作作风心得体会
2016/01/23 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL