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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
Javascript闭包实例详解
Nov 29 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
不使用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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 爬虫多线程详解及实例代码
2016/10/08 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
基于python log取对数详解
2018/06/08 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python爬取网页信息的示例
2020/09/24 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
匡威英国官网:Converse英国
2018/12/02 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
普罗米修斯教学反思
2014/02/06 职场文书
表决心的诗句大全
2014/03/11 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
同学聚会策划方案
2014/06/06 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
python中mongodb包操作数据库
2022/04/19 Python
基于docker安装zabbix的详细教程
2022/06/05 Servers
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android