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_10_对象模型
Oct 16 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
jQuery动态添加
Apr 07 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
简单实现js拖拽效果
Jul 25 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
JavaScript中如何调用Java方法
Sep 16 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
thinkPHP的表达式查询用法详解
2016/09/14 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
JS中Location使用详解
2015/05/12 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
js实现批量删除功能
2020/08/27 Javascript
react的hooks的用法详解
2020/10/12 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Python实现计算最小编辑距离
2016/03/17 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python里dict变成list实例方法
2019/06/26 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
大学生村官事迹材料
2014/01/21 职场文书
校庆团日活动总结
2014/08/28 职场文书
年会邀请函范文
2015/01/30 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
区域销售大会开幕词
2016/03/04 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python