【JavaScript】要素内のテキスト取得・削除・書き換え方法【textContent、innerHTML】

取得した要素内のテキストを操作する方法は2つあります。

textContent
innerHTML

今回は、この2つの使い方から使い分けについて、サンプルコードも交えながら紹介していきます。
テキストを書き換えたい時、一体どちらを使うべきなのでしょうか？

サンプルコードの使い方
テキストの取得方法
- サンプルコード
テキストの編集方法
- サンプルコード
テキストの削除方法
- サンプルコード
textContentとinnerHTMLの使い分け

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！

それでは本文へ、レッツゴー！

テキストの取得方法

指定した要素内のテキスト情報を取得する方法は2パターンあります。

// 要素内のテキストのみを取得
要素.textContent

// 要素内の全てを取得
要素.innerHTML

textContentは、取得した要素内のテキストのみを取得してくれます。

innerHTMLは、取得した要素内の全てを取得、つまりテキストだけではなく、要素内に使われているタグなども同時に取得します。

サンプルコード

<p>こん<strong>に</strong>ちは</p>

<script>
    // pタグの取得
    const p = document.querySelector('p');

    // textContent確認
    console.log(p.textContent);
    // innerHTML確認
    console.log(p.innerHTML);
</script>

サンプルをコピペして確認してみると、
textContentは「こんにちは」と取得しているのに対して、
innerHTMLは「こん<strong>に</strong>ちは」と取得していますね！

テキストの編集方法

続いては要素内のテキストを編集する方法です。

先ほど紹介した取得の方法と、書き換えたい内容を=（イコール）で繋げるだけです！

要素.textContent = '書き換えたい内容';
要素.innerHTML = '書き換えたい内容';

textContentではタグも文字列としてHTMLに出力され、
innerHTMLではタグが有効になります。

サンプルコード

<p id="sample_content1">このpタグの中身を<strong>textContent</strong>で取得します</p>
<p id="sample_content2">このpタグの中身を<strong>innerHTML</strong>で取得します</p>

<script>
    // それぞれの要素を取得する
    const sampleContent1 = document.querySelector('#sample_content1');
    const sampleContent2 = document.querySelector('#sample_content2');

    // 中身を確認
    console.log(sampleContent1.textContent);
    console.log(sampleContent2.innerHTML);
    
    // テキストの書き換え
    sampleContent1.textContent = "中身を<strong style=\"color:blue;\">textContent</strong>で書き換えました。";
    sampleContent2.innerHTML = "中身を<strong style=\"color:blue;\">innerHTML</strong>で書き換えました。";
</script>

テキストの削除方法

テキストの編集方法と同じで、中身を空にすれば消えます。

要素.textContent = '';
要素.innerHTML = '';

ただし、中身を空にしているだけでタグ自体は残るので注意してください。

少し今回のメインとは逸れてしまいますが、タグごと消す場合はremoveを使います。

要素.remove();

サンプルコード

innerHTMLで中身を空にした場合と、removeで丸ごと消した場合の比較です。
検証ツールでHTMLのソースを見ることで、空のタグが残っているかどうか確認できます。

<p id="delete1">文章が消え、タグのみ残ります。</p>
<p id="delete2">文章だけでなく、タグごと消えます。</p>

<script>
    // innerHTMLで消す
    document.querySelector('#delete1').innerHTML = '';
    // removeで消す
    document.querySelector('#delete2').remove();
</script>