浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】innerHTML と innerText と textContent の違い

TL;DR
innerHTML は HTMLコード、innerText は表示される文字列、textContent は純粋な文字列。

JavaScript では HTML 要素を表現するインターフェースが存在し、それを満たすものには innerHTML、innerText、textContent がプロパティとして存在することが確約されます。これらはそれぞれある要素の内部の文字列を表現するプロパティという点で似た部分がありますが決定的に違う部分も少なくありません。その違いを紹介します。

element.innerHTML – Web API | MDN
HTMLElement.innerText – Web API | MDNNode.textContent – Web API | MDN

 実際に

<table>
<tbody><tr><td><p>セル1&amp;</p></td><td>セル2</td></tr></tbody>
</table>

という HTMLコードとして成立する文字列をそれぞれのプロパティに代入した結果のデモが次です。

 それぞれ次の様になっていることがわかります。

innerHTML innerText textContent
HTMLとして解釈 される 一部される されない
改行は HTMLの解釈に従う <br>になる そのまま(適用されるCSSのwhite-spaceに従う)

 textContent が一番文字列そのままで innerHTML が完全に HTML と化しており、innerText は改行が HTML になっています。
 また、同様のHTMLコードとして成立する文字列から成るDOMを読み取った結果のデモが次です。

 innerHTML は HTML コードをそのまま、innerText は元の表示を再現しようとするテキスト、textContent は各種修飾を無視してテキストをそのまま、となっています。
 またデモで見えない違いですが textContent はレンダリングを考慮せず、パースも単純なので代入処理は innerText、innerHTML のいずれよりも速いです。

  • この記事いいね! (0)