這回在準備前端面試的過程中，在說明 innerHTML 和 innerText 的差異性時並沒有辦法做到完整的表達。因此才有了下面這篇筆記。
內容
innerText
取得一個 DOM 節點內的「渲染後」的文字
innerHTML
取得一個 DOM 節點的全部樣式和標籤，包含未渲染的文字
程式碼 Demo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div id="example"> This is a <strong>bold</strong> word. </div> <script> // 使用 innerText 獲取內容 const usingInnerText = document.getElementById('example').innerText; console.log('Using innerText:', usingInnerText); // "Using innerText:" "This is a bold word." // 使用 innerHTML 獲取內容 const usingInnerHTML = document.getElementById('example').innerHTML; console.log('Using innerHTML:', usingInnerHTML); /* "Using innerHTML:" " This is a <strong>bold</strong> word. " */ // 使用 innerText 設置內容 document.getElementById('example').innerText = 'This is a new sentence without HTML tags.'; // 使用 innerHTML 設置內容 document.getElementById('example').innerHTML = 'This is a <em>new</em> sentence with <strong>HTML tags</strong>.'; </script> |
按讚加入粉絲團
