原文地址：
innerHTML、innerText、textContent、outerHTML和value，傻傻分不清楚？什么时候该用哪个？虽然我们常用的总是innerHTML，但在一些特殊情况下，正确的选择能够事半功倍，所以是时候对这几个小家伙仔细分分清楚了。
一个栗子
废话不多说，先来看个例子：
innerHTML、innerText、textContent、outerHTML和value的区别
你是谁？ 这是一个内嵌span测试
结果如图：
看完了其实还是一脸懵逼状。。有的值一样，有的甚至连值都不见了，什么鬼？好了总结一下：
innerHTML
innerHTML用来设置或获取成对标签之间的HTML内容，包括其中内嵌的子元素标签。
- innerHTML会显示内嵌的标签，所以文本p的innerHTML会有内嵌的span
- 使用innerHTML的元素必须是标签对的形式，所以input的innerHTML值为空
- innerHTML保留了格式信息，所以文本p的innerHTML内容会有换行
innerText
innerText也用来设置或获取成对标签之间的HTML内容，但它只关注文本信息，会省略内嵌的标签名。
- innerHTML会省略内嵌的标签名，所以文本p的innerHTML只显示了span的内容，并没有显示span的标签名
- innerText也必须是标签对的形式
- innerText删除了格式信息，所有文本均在一行，所以文本p的innerText内容都在一行。
textContent
textContent也用来设置或获取成对标签之间的HTML内容，并且只关注文本信息。
- 这家伙和innerText一样一样的，但它保留了格式信息。
outerHTML
outerHTML设置或获取元素及其内容的HTML形式。
- 这个是最好区分的，直接看例子，它会把DOM元素本身的标签+内容+格式全部显示出来。
value
value是表单元素特有的属性，通常input用的比较多，就是其中输入的值，也很好区别。
innerHTML、innerText和textContent的再次较量
我们还要再把这三个难兄难弟挑出来，从浏览器兼容的角度来区别一下：
innerHTML是符合W3C标准的属性，而innerText适用于IE浏览器，textContent适用于火狐浏览器。
这也就是为什么我们总能看到innerHTML，总对它偏爱有加，毕竟是W3C的亲儿子嘛。
只不过到了今天，其余的浏览器也都实现了innerText和textContent，但要注意的是：
- IE6-8只部分支持了innerHTML，在IE下，跟table有关的元素的innerHTML是只读的，我们无法改变其值；从IE9开始，全面支持了innerHTML。
- IE9之前，是不支持textContent的。
- innerText是IE的亲儿子，放心用吧。