document.getelementbyid().value与innerHTML使用场景对比，别再搞错了兄嘚

首先getElementById()可以获取到页面上一个有id的元素，进而可以访问该元素的对应属性值，比如说value。

<input type="text" id="txt" value="hello html"/>

比如html页面中有上面这个id为txt的input元素

//获取该元素对象
var txt = document.getElementById('txt');
//获取该元素的值，即：hello html
var txtVal = txt.value;
//设置该元素的value属性值为boom
txt.value = 'boom';

如果一个元素没有value属性，那么使用document.getElementById().value是没有返回值的，比如一个div标签，就没有value属性。这类元素往往有起始标签和结束标签，比如说label，div等，就通过innerHTML来添加元素中的内容。

<script>
function addCon(){document.getElementById('lab1').innerHTML='this is a label';document.getElementById('div1').innerHTML='this is a div';}
</script>
<label id="lab1"></label>
<div id="div1"></div>
<input type="button" value="inner" onclick="addCon()">

点击按钮后，在label和div标签中就可以添加进内容，如果标签之前存在内容，innerHTML会替换掉对应的内容。如果想追加内容，可以通过innerText先获取之前的内容，拼接上新的内容后，再innerHTML。

function add(){var lab1 = document.getElementById('lab1');lab1.innerHTML=lab1.innerText+'this is a label';var div1 = document.getElementById('div1');div1.innerHTML=div1.innerText+'this is a div';}

温馨提醒：前端写的少，总是会把innerHTML='xxx’写成innerHTML(‘xxx’),导致的结果就是报错，比如：TypeError: div1.innerHTML is not a function。

document.getelementbyid().value与innerHTML使用场景对比，别再搞错了兄嘚相关推荐

document.getElementById() id是变量
js document.getElementById(id)id是变量.这个问题说实话,确实那时候让我有点无语. 不过后来摸索出来了,如果获取的id 是变量,只需要这样子写即可,如下: documen ...
Javascript：getElementById()点innerHTML联合用法(对比演示)
文章目录情况一情况二笔记2020_04_11 情况一代码document.getElementById("tr1").innerHTML情况下点击按钮后出现下图所示: 情 ...
拍照打卡签到活动到达地点拍照上传管理document.getElementById(“myP“).innerHTML=“拍照“；
<h1 id="myH1"></h1> <p id="myP"></p> <script> // 输 ...
解决 jQuery 实现填充父窗口iframe里元素的值的问题如window.parent.document.getElementById().innerHTML...
解决 jQuery 实现父窗口的问题如window.parent.document.getElementById().innerHTML 2009年12月22日星期二 11:29 A.M. 因为先 ...
1，document.getelementbyid().value与document.getElementById().innerHTML区别
document.getelementbyid().value与document.getElementById().innerHTML什么区别使用document.getElementById()可 ...
document.getelementbyid().value与document.getElementById().innerHTML什么区别
举例子来说明你会容易明白一点你使用document.getElementById()可以取到页面上一个有id的元素然后访问这个元素的属性,比如value当一个元素有value属性的时候,其value ...
document getElementById innerHTML
document.getElementById('xx').innerHTML = "html代码" 假设xx是div的id 表示将 html代码替换到id为xx的div标签中去 ...
地图位置签到打卡线上线下结合活动的小程序 document.getElementById(‘demo‘)
<h1>JavaScript 事件</h1><button onclick="document.getElementById('demo').innerHTML ...
[已经完美解决]IE下 'document.getElementById(...)' is null
View Code 1 $.ajax({ 2 type: "POST",//请求方式 3 url: "text.txt",//地址,就是action请求路径 4 ...

document.getelementbyid().value与innerHTML使用场景对比，别再搞错了兄嘚

document.getelementbyid().value与innerHTML使用场景对比，别再搞错了兄嘚相关推荐

最新文章

热门文章