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之对系统的toFixed()方法的修正
May 08 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
Js经典案例的实例代码
May 10 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 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加Nginx实现动态裁剪图片方案
2014/03/10 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
浅析python连接数据库的重要事项
2021/02/22 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
.NET方向面试题
2014/11/20 面试题
后备干部考察材料
2014/02/12 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
js不常见操作运算符总结
2021/11/20 Javascript