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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
某公司.Net方向面试题
2014/04/24 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
党员民主评议总结
2014/10/20 职场文书
车间统计员岗位职责
2015/04/14 职场文书
致接力运动员加油稿
2015/07/21 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书