[筆記] HTML5 InnerHTML InnerText 的差異 @地瓜大的飛翔旅程

章節連結

內容

innerText
innerHTML
程式碼 Demo

這回在準備前端面試的過程中，在說明 innerHTML 和 innerText 的差異性時並沒有辦法做到完整的表達。因此才有了下面這篇筆記。

內容

innerText

取得一個 DOM 節點內的「渲染後」的文字

innerHTML

取得一個 DOM 節點的全部樣式和標籤，包含未渲染的文字

程式碼 Demo

<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>