innerText 与 innerHTML 以及 value 的区别
1.标签对之间是一个值
即:是在< p > < /p >标签中间直接写一个值。
<html>
<head><title>innerHTML,innerText,value的区别</title></head>
<body>
<p id="p1">hello world </p>
<script>
window.document.getElementById('p1').innerHTML
window.document.getElementById('p1').innerText
window.document.getElementById('p1').value
</script>
</body>
</html>
以上代码运行结果为:
hello world
hello world
undefined
对比下面的代码,在< p >< /p >标签之间再写一个标签
2.标签对之间再写一个标签
即:< div>< p >< /p>< /div>
<html>
<head><title>innerHTML,innerText,value的区别</title></head>
<body>
<div id="d1"><p id="p1">hello world </p></div>
<script>
window.document.getElementById('d1').innerHTML
window.document.getElementById('d1').innerText
window.document.getElementById('d1').value
</script>
</body>
</html>
运行结果为:
< p id="p1">hello world < /p>
hello world
undefined
经过以上对比,可以总结得到:
1.当标签对之间是个文本:
innerHTML的结果为:文本值
innerText的结果为:文本值
2.当标签对里面还是一个标签对的时候:
innerHTML的结果为:里面的整个标签对原封不动
innerText的结果为:里面标签对的文本值(没有文本值则为undefined)
3.value的值只跟标签是否有value属性有关,若是标签有value属性,那么value值就是value属性的值。没有value属性,那么就是undefined
建议: **多使用innerHTML,少使用innerText 原因如下:innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器),因此,尽可能地去使用 innerHTML,而少用innerText**