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 相关文章推荐
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
微信JS接口大全
Aug 25 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
Django使用多数据库的方法
Sep 06 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
详解vue-cli3多环境打包配置
Mar 28 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弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Python实现选择排序
2017/06/04 Python
python实现分页效果
2017/10/25 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
清明节扫墓活动方案
2014/03/02 职场文书
班干部演讲稿
2014/04/24 职场文书
论文诚信承诺书
2014/05/23 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2015年植树节活动总结
2015/02/06 职场文书
现实表现证明材料
2015/06/19 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书