目录
1、提出问题
2、开始实验
3、记录数据
4、分析结果
5、得出结论
1、提出问题
涉及元素节点内容读取或修改的时候，有三个属性可供选择
innerHTML
，
innerText
,
textContent
。
那么这三个属性各有什么不同，又分别适用于什么情况。
受
这个说明
启发，我写了个简单的例子比较了三者的不同。
2、开始实验
一段简单的HTML代码:
a simple text.
a hidden text.
3、记录数据
结果页面：
控制台输出：
innerHTML:
a simple text.
a hidden text.
innerText:
a SIMPLE text.
textContent:
.upper-case {
text-transform: uppercase;
}
.hidden {
display: none;
}
a simple text.
a hidden text.
4、分析结果
从页面结果和控制台的结果来看：
innerHTML
: 返回的是文档中元素内的HTML片段，在设置时，HTML片段会进过解析。
innerText
: 返回的是
渲染结果
（页面呈现结果）的文本内容。
textContent
: 返回结果去除了内部（包括嵌套节点）标签及其属性，保留了内部的文本内容。
innerText
和
textContent
被设置时以
安全方式
（不会引起文档结构变化）写入。
5、得出结论
想获得元素内的html内容或设置其内部HTML，使用
innerHTML
。
想获得元素的文本内容或设置其文本内容，使用
textContent
。
（很少使用）如果获取在页面呈现的文本内容，使用
innerText
。
事实上，很多时候，尤其是元素内部只是普通文本的时候，三者的区别不会造成什么问题，所以很多人对它们的区别不清楚。
不过，我认为，至少应该记住：在涉及HTML内容时，必须使用innerHTML；否则，使用textContent，保证安全。 使用innerText往往是为了兼容IE6-7。
以上就是innerHTML innerText textContent使用区别示例详解的详细内容，更多关于innerHTML innerText textContent的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
js中innerText/textContent和innerHTML与target和currentTarget的区别
innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
详谈innerHTML innerText的使用和区别
innerText和textContent对比及使用介绍
javascript textContent与innerText的异同分析
textContent在Firefox下与innerText等效的属性