取得した要素内のテキストを操作する方法は2つあります。
- textContent
- innerHTML
今回は、この2つの使い方から使い分けについて、サンプルコードも交えながら紹介していきます。
テキストを書き換えたい時、一体どちらを使うべきなのでしょうか?
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽの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>
textContentとinnerHTMLの使い分け
単純にテキストのみを書き換えたい場合はtextContentを使い、
タグをつけたいなど、テキスト以外にも手を加えたい場合にinnerHTMLを使うことになります。
自分が何をしたいかによって、どちらを使うべきか答えが出てくるかと思いますが、どちらでもいい場合もあるかと思います。
その場合は、どちらでも問題ありません。
自由に使っちゃいましょう!