innerHTML、textContent、innerText 使い分け

jsのinnerHTML、textContent 、innerText をどう使い分けければいいの？
特に innerTextはどの場面で使えるの？

その悩みにお答えします。

それぞれのプロパティの違いを理解していますか？

HTML 要素の取得・書き込みしたい時は innerHTML を使って、文字列の書き込み・挿入したい時は textContent を使えば良いのでは？と思った読者さん。

正解です。

では次の質問に答えれますか？

Q1 : ブラウザで表示されているテキストのみを取得する方法は？（例えば display:none が指定された要素のテキストを省きたい時）
Q2 : 改行を含めたテキストを挿入する方法は？

答えはどちらも「 innerText を使用する」です。
（Q2 の別解としては「 innerHTML で br タグを含めてテキストを書き込む」がある）

今回は innerHTML、textContent、innerText の取得時と挿入時での特徴を紹介します。

対象読者

何か挿入したい時はとりあえず innerHTML を多用している人
取得や書き込みが意図したものと違った経験がある人
特殊文字（例えば
```
&lt;
```
）の取得時・書き込み時の挙動の違いを知りたい人

それでは早速やっていきましょう。

取得時

以下の検証用の HTML コードを使って、 innerHTML と innerText と textContent による取得時の違いを見ていきます。

検証用の HTML コード


  <section id="sectionA">
    <div>上<br>白石
        萌音
    </div>
    &lt;span&nbsp;&gt;文字実体参照&lt;/span&gt;
    <div id="divA" style="visibility:hidden">見えない要素</div>
    <div id="divB" style="display:none">非表示の要素</div>
    <div id="divC"><s>取り消し線</s></div>
    <script>
        console.log("スクリプトだよ")
    </script>
    <style>
        #divC {
            width: 300px;
            height: 300px;
            background-color: #aaa;
            text-decoration: underline;
        }
        </style>
        </section>

上記のHTMLコードのブラウザでの表示結果

取得する値

それぞれのプロパティで取得した値を console.log で確認します。

innerHTML


const sectionA = document.getElementById("sectionA")
console.log(sectionA.innerHTML)

Console 画面

innerText


const sectionA = document.getElementById("sectionA")
console.log(sectionA.innerText)

Console 画面

textContent


const sectionA = document.getElementById("sectionA")
console.log(sectionA.textContent)

Console 画面

取得する値のまとめ

console.log で出力された値について以下にまとめました。

	innerHTML	innerText	textContent
HTMLタグ	表示される	表示されない。br タグが使用されていたところでは改行される。	表示されない
HTMLコード内の改行	改行される	改行されない	改行される
文字列実体参照	特殊文字に変換前の文字列のまま表示される	変換後の特殊文字が表示される	変換後の特殊文字が表示される
script 要素	表示される	表示されない	要素内のテキストのみ表示される
style 要素	表示される	表示されない	要素内のテキストのみ表示される
display:none を指定した要素	表示される	表示されない	要素内のテキストが表示される
visibility:hidden を指定した要素	表示される	表示されない	要素内のテキストが表示される

それぞれのプロパティの取得時の特徴

innerText

取得してくる値は、ブラウザで表示されている HTML 要素内のテキストといった感じです。br タグでの改行は反映され、非表示の要素のテキストは取得されません。

取得した要素内の改行は、ソースコード上の改行は反映されませんが、br タグでの改行は反映されます。
取得した要素内の文字実体参照は、ソースコード上のものではなく、ブラウザで表示されるような変換後の特殊文字が取得されます。
取得した要素内の style と script 要素のテキストは取得されません。
取得した要素内の HTML 要素で display:none と visibility:hidden が指定されている要素のテキストは取得されません。つまり、ブラウザで表示されていないテキストは取得されません。

innerHTML

取得してくる値は、HTMLコードです。HTMLタグ含めてHTMLコードを全て文字列として取得している感じです。

取得した要素内の改行は、ソースコード上の改行は反映されますが、br タグでの改行は反映されません。
取得した要素内の文字実体参照は、ソースコード上のものが取得されます（特殊文字への変換前の文字列）。
取得した要素内のHTML要素は style と script 要素含めて全て取得されます。

textContent

取得してくる値は、ブラウザ上で表示されているテキストというより、ソースコード上のHTML要素内のテキストといった感じです。
display:none の指定などによりブラウザで非表示になっている要素のテキストも取得されます。

取得した要素内の改行は、ソースコード上の改行は反映されますが、br タグでの改行は反映されません。
取得した要素内の文字実体参照は、ソースコード上のものではなく、ブラウザで表示されるような変換後の特殊文字が挿入されます。
取得した要素内の style と script 要素のテキストも取得されます。
取得した要素内の HTML 要素で display:none と visibility:hidden が指定されている要素のテキストも取得されます。つまり、ブラウザで表示されていないテキストも取得されます。

それぞれのプロパティの取得時の使い分け方

要素の中の、HTMLコードを取得したい時は innerHTML
要素の中の、非表示の要素を含むテキスト（ display:none が指定されている要素のテキストや style 要素の中など）を取得したい時は textContent
要素の中の、ブラウザで表示されている、テキストや改行を取得したい時は innerText

挿入時

以下の検証用の HTML コードを使って、 innerHTML と innerText と textContent による書き込み時の違いを見ていきます。

検証用の HTML コード


  <section id="sectionA"></section>

挿入後のブラウザでの表示結果

それぞれのプロパティを使って、書き込んだ文字列を挿入します。書き込んだ文字列はどのプロパティでも同文です。

innerHTML


const sectionA = document.getElementById("sectionA")
sectionA.innerHTML = `
    <div>上<br>白石
        萌\n音
    </div>
    &lt;span&nbsp;&gt;文字実体参照&lt;/span&gt;
    <div id="divA" style="visibility:hidden">見えない要素</div>
    <div id="divB" style="display:none">非表示の要素</div>
    <div id="divC"><s>取り消し線</s></div>
    <script>
        console.log("スクリプトだよ")
    </script>
    <style>
        #divC {
            width: 300px;
            height: 300px;
            background-color: #aaa;
            text-decoration: underline;
        }
        </style>
`

ブラウザの表示結果

innerText


const sectionA = document.getElementById("sectionA")
sectionA.innerText = `
    <div>上<br>白石
        萌\n音
    </div>
    &lt;span&nbsp;&gt;文字実体参照&lt;/span&gt;
    <div id="divA" style="visibility:hidden">見えない要素</div>
    <div id="divB" style="display:none">非表示の要素</div>
    <div id="divC"><s>取り消し線</s></div>
    <script>
        console.log("スクリプトだよ")
    </script>
    <style>
        #divC {
            width: 300px;
            height: 300px;
            background-color: #aaa;
            text-decoration: underline;
        }
        </style>
`

ブラウザの表示結果

textContent


const sectionA = document.getElementById("sectionA")
sectionA.textContent = `
    <div>上<br>白石
        萌\n音
    </div>
    &lt;span&nbsp;&gt;文字実体参照&lt;/span&gt;
    <div id="divA" style="visibility:hidden">見えない要素</div>
    <div id="divB" style="display:none">非表示の要素</div>
    <div id="divC"><s>取り消し線</s></div>
    <script>
        console.log("スクリプトだよ")
    </script>
    <style>
        #divC {
            width: 300px;
            height: 300px;
            background-color: #aaa;
            text-decoration: underline;
        }
        </style>
`

ブラウザの表示結果

挿入後のブラウザの表示結果まとめ

書き込んだ文字列を挿入後のブラウザの表示結果をまとめました。

場合 \ プロパティ	innerHTML	innerText	textContent
HTML要素	要素は解析されて挿入	要素は解析されず文字列として挿入	要素は解析されず文字列として挿入
改行	半角スペースとして挿入	改行として挿入	半角スペースとして挿入
改行(\n)	半角スペースとして挿入	改行として挿入	半角スペースとして挿入
文字列実体参照	変換されて特殊文字として挿入	変換されず元の文字列で挿入	変換されず元の文字列で挿入
script 要素	要素は解析されて挿入？（script 要素の中の処理は実行されない）	要素は解析されず文字列として挿入	要素は解析されず文字列として挿入
style 要素	要素は解析されて挿入	要素は解析されず文字列として挿入	要素は解析されず文字列として挿入
display:none を指定した要素	解析され非表示になる	文字列として挿入	文字列として挿入
visibility:hidden を指定した要素	解析され非表示になる	文字列として挿入	文字列として挿入