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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JavaScript实现拖拽功能
Feb 11 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
文件上传程序的全部源码
2006/10/09 PHP
php xml-rpc远程调用
2008/12/19 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python环境变量设置方法
2016/08/28 Python
Python程序运行原理图文解析
2018/02/10 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
公司开除员工通知
2015/04/22 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
导游词之西安骊山
2019/12/20 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis