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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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
php Static关键字实用方法
2010/06/04 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
两个php日期控制类实例
2014/12/09 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
自行车租赁公司创业计划书
2014/01/28 职场文书
学校后勤岗位职责
2014/02/19 职场文书
市场总经理岗位职责
2014/04/11 职场文书
《金子》教学反思
2014/04/13 职场文书
小学中队委竞选稿
2015/11/20 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书