1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<style> 7 ????????????.demo{ 8 ????????????????visibility: hidden; 9 ????????????}10 ????????????.test{11 ????????????????display: none;12 ????????????}13 ????????</style>14 ????</head>15 ????<body>16 ????????<div id="demo">17 ????????????放到<p class="demo">蚂蚁不是蚂蚁</p>撒大苏打18 ????????</div>19 ????????<div id="test">20 ????????????放到<p class="test">蚂蚁不是蚂蚁</p>撒大苏打21 ????????</div>22 ????????23 ????????24 ????????<script type="text/javascript">25 ????????????let demo = document.getElementById("demo")26 ????????????console.log("1"+demo.innerHTML,"2"+demo.textContent,"3"+demo.innerText)27 // ???????????128 // ???????????放到<p class="demo">蚂蚁不是蚂蚁</p>撒大苏打29 // ????????230 // ???????????放到蚂蚁不是蚂蚁撒大苏打31 // ????????3放到32 //33 //撒大苏打34 ????????????let text = document.getElementById("test")35 ????????????console.log("1"+test.innerHTML,"2"+test.textContent,"3"+test.innerText)36 // ???????????137 // ???????????放到<p class="test">蚂蚁不是蚂蚁</p>撒大苏打38 // ????????239 // ???????????放到蚂蚁不是蚂蚁撒大苏打40 // ????????3放到撒大苏打41 42 ????????????//在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。copy43 ????????????//44 ????????????//通过 innerText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过 innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。45 ????????????//在通过 innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。会解析46 ????????????//textContent ?copy+解析+不会受干扰（hidden,none)47 ????????</script>48 ????</body>49 </html>可以联系之前再vue中的一个坑，当你设置display:none的时候那个元素是不占空间了，但是他依旧在哪里并没有消失，v-for为false的时候才是真的没了，联系
这里的情况可以这样理解这几个元素,innerHTML就是搬运工，不动脑子就搬过来了，textContent却把代码搬过来并且解析不受样式的影响，innerText解析代码但是受样式影响的（ps:display:none不占空间,visibility:hidden占空间）
innerHTML,innertext,textContent区别
原文地址：https://www.cnblogs.com/lujunan/p/10304366.html