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 // 1 28 // 放到<p class="demo">蚂蚁不是蚂蚁</p>撒大苏打 29 // 2 30 // 放到蚂蚁不是蚂蚁撒大苏打 31 // 3放到 32 // 33 //撒大苏打 34 let text = document.getElementById("test") 35 console.log("1"+test.innerHTML,"2"+test.textContent,"3"+test.innerText) 36 // 1 37 // 放到<p class="test">蚂蚁不是蚂蚁</p>撒大苏打 38 // 2 39 // 放到蚂蚁不是蚂蚁撒大苏打 40 // 3放到撒大苏打 41 42 //在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。copy 43 // 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占空间）