innerHTML和innerText这两个属性经常会用到，但至今我还没有搞清楚2者的区别，今天我自己想通过几个实例来看看在获取dom内容时究竟有什么不一样。
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerHTML和innerText区别之我见-www.woaidaogu.com</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerHTML);
}
});
});
</script>
</head>
<body>
<button><b>你喜欢喝什么？</b></button>
<ul>
<li>我喜欢喝<b>Coffee</b>！</li>
<li>我喜欢喝<b>Milk</b>！</li>
<li>我喜欢喝<b>Soda</b>！</li>
</ul>
</body>
</html>
很明显第一个li标签取innerHTML的结果包含li标签内的所有内容包括html标签，"我喜欢喝<b>Coffee</b>！"。
innerText 设置或获取位于对象起始和结束标签内的文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerHTML和innerText区别之我见-www.woaidaogu.com</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerText);
}
});
});
</script>
</head>
<body>
<button><b>你喜欢喝什么？</b></button>
<ul>
<li>我喜欢喝<b>Coffee</b>！</li>
<li>我喜欢喝<b>Milk</b>！</li>
<li>我喜欢喝<b>Soda</b>！</li>
</ul>
</body>
</html>
很明显第一个li标签取innerText的结果包含li标签内的除了html标签<b>和</b>的所有内容，"我喜欢喝Coffee！"。
在这里innerText属性的作用相当于过滤掉了html标签。
通过以上内容我们更加了解了innerHTML和innerText属性的区别，感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
