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

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

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

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

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

 1 <script>
 2 function addCon()
 3     {
 4         document.getElementById('lab1').innerHTML='this is a label';
 5         document.getElementById('div1').innerHTML='this is a div';
 6     }
 7 </script>
 8 <label id="lab1"></label>
 9 <div id="div1"></div>
10 <input type="button" value="inner" onclick="addCon()">

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

1 function add()
2     {
3         var lab1 = document.getElementById('lab1');
4         lab1.innerHTML=lab1.innerText+'this is a label';
5         var div1 = document.getElementById('div1');
6         div1.innerHTML=div1.innerText+'this is a div';
7     }

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

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