Categories: JavaScript

【JavaScript入門】innerHTMLとtextContentとinnerTextの違い

display:noneがある場合

以下のHTMLを使って違いを検証していきます。

HTML

<div id="divA">This is <span style="display:none">some</span> text!</div>

innerHTMLの場合

innerHTMLの場合は以下のような結果になります。

js

console.log(document.getElementById('divA').innerHTML);

実行結果

This is <span style="display:none">some</span> text!

解説

innerHTMLは要素を返します。なのでspan要素などもそのまま取得します。

textContentの場合

textContentの場合は以下のような結果になります。

js

console.log(document.getElementById('divA').textContent);

実行結果

This is some text!

解説

textContentはテキストの内容を取得します。

innerTextの場合

innerTextの場合は以下のような結果になります。

js

console.log(document.getElementById('divA').innerText);

実行結果

This is text!

解説

innerTextはテキストの内容を取得します。
textContentとの違いは、innerTextはユーザが読めるテキストのみを取得する点です。
つまり、innerTextはユーザがブラウザで見ているのと同じ状態で取得できると言えます。

改行brがある場合

以下のHTMLを使って違いを検証していきます。

HTML

<div id="divA"><p>あいうえお<br>かきくけこ<br>さしすせそ</p></div>

innerHTMLの場合

innerHTMLの場合は以下のような結果になります。

js

console.log(document.getElementById('divA').innerHTML);

実行結果

<p>あいうえお<br>かきくけこ<br>さしすせそ</p>

解説

innerHTMLは要素を返します。なのでbr要素などもそのまま取得します。

textContentの場合

textContentの場合は以下のような結果になります。

js

console.log(document.getElementById('divA').textContent);

実行結果

あいうえおかきくけこさしすせそ

解説

textContentはテキストの改行を無視して取得します。

innerTextの場合

innerTextの場合は以下のような結果になります。

js

console.log(document.getElementById('divA').innerText);

実行結果

あいうえお
かきくけこ
さしすせそ

解説

innerTextは改行された状態でテキストを取得します。

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp