innerText、innerHTML、textContent、outerHTML 的差別

innerText

• innerHTML 取得在一個節點內的全部 HTML 標籤和文字

let content = document.getElementById('content').innerText  ; 
document.getElementById('content').innerText = 'Hello' ;

• 參考 MDN 文件中有說明到 Node.innerText 是一個代表節點及其後代之「已渲染」（rendered）文字內容的屬性。

範例一

在 HTML 放一個 display: none 的字

<span>Hello <span style="display: none;">World</span></span>

• innerText 只會有 Hello，證明這會取得渲染後的文字內容
• textContent 會是 Hello World， 這會取得文字在忽視 HTML 後的文字內容

範例二

<div class=content></div> 的內容

<div class="content">
  <p>
    1<br>2<br>3<span style="display: none;">.5 </span><br>4
    5
    6
    7
    8
  </p>
</div>

let content = document.querySelector('.content')
console.log(content.innerText)

console 得到的值是並不會出現被隱藏的 .5

"1
2
3
4 5 6 7 8"

所以innerText 取得的文字與換行會和 HTML 渲染後呈現的樣子相像

innerHTML

• innerText 取得在一個節點內的全部樣式

範例

<div class=content></div> 的內容

<div class="content">
  <p>
    1<br>2<br>3<br>4
    5
    6
    7
    8
  </p>
</div>

let content = document.querySelector('.content')
console.log(content.innerHTML)

就會取得節點內完整的標籤和文字

"
<p>
1<br>2<br>3<br>4
5
6
7
8
</p>
"

包括原始碼的換行都會保留

textContent

• textContent 取得在一個節點內的文字並包括換行
• 參考 MDN 文件說明 Node.textContent 屬性表示了節點或其後代的文字內容。

範例

<div class="content">  <!-- 從這裡開始的換行都有包括 -->
  <p>
    1<br>2<br>3<span style="display: none;">.5 </span><br>4
    5
    6
    7
    8
  </p>
</div>

let content = document.querySelector('.content')
console.log(content.textContent)

console 得到的值是

"             // div.content 開始的換行
              // p 的換行
123.5 4
5
6
7
8

"

只會取得呈現在 HTML 原始碼內的換行、空格和文字， <br> 會忽略

所以textContent 取得的文字與換行會和原始碼相像

outerHTML

• outerHTML 包括在一個節點內的全部 HTML 標籤和文字
• 另外還有outerText ，因為看起來是跟 innerText 相同就不多作範例。

範例

<div class="content">
  <p>
    1<br>2<br>3<span style="display: none;">.5 </span><br>4
    5
    6
    7
    8
  </p>
</div>

let content = document.querySelector('.content')
console.log(content.outerHTML)

"<div class='content'>
<p>
1<br>2<br>3<span style='display: none;'>.5 </span><br>4
5
6
7
8
</p>
</div>"

得到的就會是包括節點 一模一樣的完整內容

createTextNode()

要注意，在建立新節點後，只有 textContent 是唯一可用方法

var text = document.createTextNode('text');

console.log(text.innerText);    //  undefined
console.log(text.innerHTML);    //  undefined
console.log(text.textContent);  //  text
console.log(text.outerHTML);    //  undefined

參考文件

More on differences between innerText and textContent
提供的 範例

小tips: JS DOM innerText和textContent的区别