innerText和innerHTML的区别

innerHTML和innerText都是返回标签之间的信息，只是innerHTML会将标签一起返回，而innerText只返回标签间的内容。看下面的例子（哈哈，这个例子是我看视频的时候其中的一个例子，拿来用啦，这个例子主要是说data-*的用法的，有兴趣的同学可以去看看data-*（自定义属性）的用法）。

<ul id="users">
    <li class="item" data-id="1" data-age="18" data-gender="true" data-name="张三
">
      张三
      <pre>id： 1
age： 18
gender： true
name： 张三

</pre>
    </li>
    <li class="item" data-id="2" data-age="18" data-gender="false" data-name="李四
">
      李四
      <pre>id： 2
age： 18
gender： false
name： 李四

</pre>
    </li>
    <li class="item" data-id="3" data-age="18" data-gender="true" data-name="王二
">
      王二
      <pre>id： 3
age： 18
gender： true
name： 王二

</pre>
    </li>
  </ul>  

<ul id="users">
    <li class="item" data-id="1" data-age="18" data-gender="true" data-name="张三
">
      张三
      <pre>id： 1
age： 18
gender： true
name： 张三

</pre>
    </li>
    <li class="item" data-id="2" data-age="18" data-gender="false" data-name="李四
">
      李四
      <pre>id： 2
age： 18
gender： false
name： 李四

</pre>
    </li>
    <li class="item" data-id="3" data-age="18" data-gender="true" data-name="王二
">
      王二
      <pre>id： 3
age： 18
gender： true
name： 王二

</pre>
    </li>
  </ul>   

通过document.getElementById('users').innerHTML，innerHTML会返回如下带标签的内容：

"
    <li class="item" data-id="1" data-age="18" data-gender="true" data-name="张三
">
      张三
      <pre>id： 1
age： 18
gender： true
name： 张三

</pre>
    </li>
    <li class="item" data-id="2" data-age="18" data-gender="false" data-name="李四
">
      李四
      <pre>id： 2
age： 18
gender： false
name： 李四

</pre>
    </li>
    <li class="item" data-id="3" data-age="18" data-gender="true" data-name="王二
">
      王二
      <pre>id： 3
age： 18
gender： true
name： 王二

</pre>
    </li>

通过document.getElementById('users').innerText，innerText会仅返回内容：

"张三
id： 1
age： 18
gender： true
name： 张三

李四
id： 2
age： 18
gender： false
name： 李四

王二
id： 3
age： 18
gender： true
name： 王二

除上面不同之外，innerText在低版本的火狐浏览器不支持，需要使用textContent，即这里的是document.getElementById('users').textContent。