JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのinnerHTMLとinnerTextの違いとは？実例コードでわかりやすく解説

JavaScriptでHTML要素の中身を取得・操作する際によく使われるプロパティに、innerHTMLとinnerTextがあります。どちらも要素内のテキストを取得するためのものですが、返される内容に大きな違いがあります。

innerHTMLとinnerTextの違い

innerHTML — 要素内のテキストを、空白や内部に含まれるタグ（<b>や<i>など）も含めてすべて返します。元のテキストの書式やタグ構造がそのまま保持されるのが特徴です。

innerText — 要素内のテキストのみを返します。余分な空白は除去され、内部のタグも取り除かれた状態になります。

つまり、タグごと含めた「生のHTML」が欲しい場合はinnerHTML、見た目通りのプレーンなテキストが欲しい場合はinnerTextを使うのが基本です。

サンプルコード

以下は、JavaScriptでinnerHTMLとinnerTextの挙動を比較できるサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>innerHTML vs innerText</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>innerHTML vs innerText</h1>
<div class="sample">こんにちは <b>World</b> <i>サンプルテキスト</i></div>
<div class="result">innerHTML =</div>
<div class="result">innerText =</div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、対象のテキストに対する
innerTextとinnerHTMLの結果が表示されます</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelectorAll(".result");
    let sampleEle = document.querySelector(".sample");
    let a;
    BtnEle.addEventListener("click", () => {
        resEle[0].innerHTML += sampleEle.innerHTML;
        resEle[1].innerHTML += sampleEle.innerText;
    });
</script>
</body>
</html>

実行結果

ページを開いた直後の初期表示：

JavaScriptのinnerHTMLとinnerTextの違いとは？実例コードでわかりやすく解説

「ここをクリック」ボタンを押すと、それぞれの結果が表示されます。

JavaScriptのinnerHTMLとinnerTextの違いとは？実例コードでわかりやすく解説

結果からわかること

innerHTMLの結果には、<b>タグや<i>タグといったHTMLタグがそのまま含まれて表示されます。一方、innerTextの結果ではタグがすべて取り除かれ、「こんにちは World サンプルテキスト」というテキストのみが出力されます。

このように、HTMLの構造ごと扱いたい場面ではinnerHTMLを、ユーザーに見えるテキストだけを取り出したい場面ではinnerTextを選ぶことで、意図した処理を正しく実装できます。なお、textContentという類似のプロパティもありますが、こちらはCSSによる表示状態を考慮せず、隠れたテキストも含めて取得する点がinnerTextとの違いです。

  1. JavaScriptの型キャスト(型変換)とは?String・Number・Booleanの使い方を解説

    型キャスト(型変換)とは?型キャストとは、あるデータ型を別のデータ型へ明示的に変換することを指します。JavaScriptでは、以下の3つの関数を使った変換が最も一般的です。String() … 文字列型へ変換Boolean() … 真偽値型へ変換Number() … 数値型へ変換それぞれの関数に値を渡すだけで、簡単に目的の型へ変換できるのが特徴です。JavaScriptで型キャストを行うコード例以下は、JavaScriptで型キャストを行うサンプルコードです。ボタンをクリックすると、値「44」が文字列・数値・真偽値へそれぞれ変換され、結果が画面に表示されます。<!DOCTYPE htm

  2. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド