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。