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占空間）