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 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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服务器实现多session并发运行
2006/10/09 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php 中的closure用法详解
2017/06/12 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
如何通过cmd 连接阿里云服务器
2022/04/18 Servers