JavaScript

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

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

textContentとinnerHTMLの違い

textContentとは?

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

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

innerHTMLとは?

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

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

textContentとinnerHTMLのデモ・サンプル

textContentinnerHTMLの違いを比べてみます。

サンプルコード・デモ

<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">内をそれぞれtextContentinnerHTMLで取得します。

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

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

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

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

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


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2021 ウェブつく Powered by AFFINGER5