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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
使用adodb lite解决问题
2006/12/31 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
php自定义时间转换函数示例
2016/12/07 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
浅析return false的正确使用
2013/11/04 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python中星号变量的几种特殊用法
2016/09/07 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Python gevent协程切换实现详解
2020/09/14 Python
web页面录屏实现
2019/02/12 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
任意存:BOXFUL
2018/05/21 全球购物
销售自我评价
2013/10/22 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
生物工程专业求职信
2014/09/03 职场文书
大班下学期个人总结
2015/02/13 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技