getElementById().innerHTML与getElementById().value的区别

因为总有新手朋友问这个问题，所以我们小编特整理一下方法需要的朋友。

简单来说：表单用value，插入字符用innerHTML

比如<input type="text" value="" id="jb51" />

有value属性的标签才能使用getElementById("jb51").value
像<div id="jb51">12345</div>

这种没有value属性的标签就用getElementById("jb51").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”。

赞 (0)

相关推荐

  • getElementById().innerHTML与getElementById().value的区别

    因为总有新手朋友问这个问题,所以我们小编特整理一下方法需要的朋友. 简单来说:表单用value,插入字符用innerHTML 比如<input type="text" value="" id="jb51" /> 有value属性的标签才能使用getElementById("jb51").value 像<div id="jb51">12345</div> 这种没有value

  • 详谈innerHTML innerText的使用和区别

    详谈innerHTML innerText的使用和区别

    document对象中有innerHTML.innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的: 1) innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身) 2) outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身) 3) innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身) 4) outerTe

  • js querySelector和getElementById通过id获取元素的区别

    这是sina同事xiaoniu发现的,如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E5

  • document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

    不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById(). 不过要注意的是使用getElementById时对不同的浏览器执行的结果可能是不同的,以下有相关说明 复制代码 代码如下: text1: <input name="textName1" type="text" id="textName2" /> <br> text2: <input name="textName2

  • document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页

    理解这句话可看以下: 例1(这个可以让你理解文档中哪些是对象) Document.All Example Example Heading This is a paragraph. It is only a paragraph. Yet another paragraph. This final paragraph has special emphasis. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 输出结果: 复制代码 代码如下: Example Heading This is

  • javascript getElementById 使用方法及用法

    document.getElementById("link").href; document.getElementById("link").target; document.getElementById("img").src; document.getElementById("img").width; document.getElementById("img").height; document.getEl

  • innerHTML，outerHTML,innerTEXT三者之间的区别

    innerHTML，outerHTML,innerTEXT三者之间的区别

    与innerHTML不同,outerHTML包括整个标签,而不仅限于标签内部的内容.对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来:

  • JSON与XML的区别对比及案例应用

    1.定义介绍 (1).XML定义 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. XML使用DTD(document type definition)文档类型定义来组织数据;格式统一,跨平台和语言,早已成为业界公认的标准. XML是标准通用标记语言 (SGML) 的子集,非常适合 Web 传输.XML 提供统一的方法来描述和交换独立于应用

  • IE与firefox下Dhtml的一些区别小结

    1.DOM上的接口基本上还是一致的,但经测试发现mozilla下的DOM更标准些,就算些法一样,IE下会有一些微小的区别,但无关要紧 2.事件模型上,这方面区别算比较大. mozilla下的e.target 相当于 ie下的event.srcElement,但细节上有区别,后者是返回一个html element 而e.target返回的是个节点,也就是说包括文本节点,方法可以这样 var trg = e.target; while(trg.nodeType!=1)trg=trg.parentNo

  • 翻译整理的jQuery使用查询手册

    翻译整理的jQuery使用查询手册

    翻译整理:Young.J官方网站:http://jquery.com jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!   下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)                       jQuery Downloads (http:

随机推荐