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';
    }

document.getElementByld() 用于获取网页标签id，根据标签id获取到DOM

document.getElementByld().innerHTML()获取对应标签的内容