textContentとinnerHTMLの違いと使い方【JavaScript】

この記事では、JavaScriptのtextContentとinnerHTMLの違いを解説します。

textContentとinnerHTMLの違い

textContentとは？

簡単に解説すると、textContentは「テキスト情報のみを取得」します。

取得できるのは「文字列またはnull」となります。

innerHTMLとは？

簡単に解説すると、innerHTMLは「要素内のHTMLのマークアップを取得」します。

そのため、タグ情報なども含めて取得されます。

textContentとinnerHTMLのデモ・サンプル

textContentとinnerHTMLの違いを比べてみます。

サンプルコード・デモ

<div id="sample">テキストが<strong>太字</strong>です。<br>改行しました。</div>
<button onclick="actionBtn()">実行ボタン</button>

function actionBtn() {
  var sample = document.getElementById('sample');
  var tc = sample.textContent;
  var ih = sample.innerHTML;
  console.log(tc);
  console.log(ih);
}

実行ボタンをクリックすると、<div id="sample">内をそれぞれtextContentとinnerHTMLで取得します。

そしてconsole logにそれぞれの結果が出力します。

console logに出力される結果は以下のようになります。

// console.log
テキストが太字です。改行しました。
テキストが<strong>太字</strong>です。<br>改行しました。

textContentは「テキスト情報のみを取得」しています。

それに対してinnerHTMLは「タグ情報も取得」しています。