【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

【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は改行された状態でテキストを取得します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です