innerHTML和innerText属性的区别

一、innerHTML：获得一个元素内部的所有内容，包括标签、文本代码

<ul class="web-nav" id="gw">
	<li><a href="#">公司官网</a></li>
	<li><a href="#">帮助中心&nbsp∨</a></li>
	<li><a href="#">旗下产品&nbsp∨</a></li>
	<li><a href="#">网站导航&nbsp∨</a></li>
	<li><a href="#"><span>登录</span> &nbsp/&nbsp 注册 </a></li>
</ul>

获取ul元素的innerHTML:

var li005 = document.querySelector('#gw');
console.log(li005.innerHTML);   //  得到代码：<li><a href="#">公司官网</a></li><li><a href="#">帮助中心&nbsp∨</a></li><li><a href="#">旗下产品&nbsp∨</a></li><li><a href="#">网站导航&nbsp∨</a></li><li><a href="#"><span>登录</span> &nbsp/&nbsp 注册 </a></li>

二、innerText：获得一个元素的文本内容，标签代码不算

<li>公司官网</li>

获取li元素的文本内容：

li.innerText;   //  输出“公司官网”

三、应用（不推荐使用，对原代码的改动过大）
innerHTML可以直接为文档添加元素

<ul class="web-nav" id="gw">
	<li><a href="#">公司官网</a></li>
	<li><a href="#">帮助中心&nbsp∨</a></li>
	<li><a href="#">旗下产品&nbsp∨</a></li>
	<li><a href="#">网站导航&nbsp∨</a></li>
	<li><a href="#"><span>登录</span> &nbsp/&nbsp 注册 </a></li>
</ul>

在ul元素里加入一个li：

var father = document.getElementById('gw');
father.innerHTML += <li>首页</li>;  //  相当于在原有HTML代码的基础上拼接字符串，加入一串li代码