JavaScriptのinnerHTMLとinnerTextの使い方と違いを徹底解説

Webサイトをよりインタラクティブにするには、ページ上のテキストやHTMLを動的に変更する方法を理解することが不可欠です。そのために活躍するのが、innerTextとinnerHTMLという2つのプロパティです。

これらのプロパティを使えば、DOM要素のテキストやHTMLコードを簡単に書き換えられます。本記事では、JavaScriptにおけるinnerTextとinnerHTMLの基本的な使い方から、実際のコード例まで詳しく解説します。

JavaScriptのinnerHTMLとは？

innerHTMLは、Webページ上の要素のHTMLコンテンツを取得・設定するためのプロパティです。innerHTMLはHTML DOM（Document Object Model）の一部であり、特に要素などの内容を設定・変更する際によく使われます。

innerHTMLは次のように使用します。

document.getElementById("paragraph").innerHTML = "Career Karma!";

この1行のコードは、「paragraph」というIDを持つ要素の内容を「Career Karma!」に設定します。getElementById()メソッドは、指定したIDを持つ要素を取得します。

ブラウザはページが読み込まれる際に、Document Object Model（DOM）を構築します。DOMとは、ページ上に表示される一連のオブジェクトの集合のことです。

DOMがあるおかげで、Web要素を変更するたびにHTMLコードを直接編集する必要はありません。DOMとJavaScriptを組み合わせれば、現在のセッション内でページの表示内容を自由に変更できます。

JavaScriptのinnerTextとは？

innerTextは、要素のテキスト内容を設定するためのプロパティです。段落内のタグといった子孫要素の内容もまとめて扱えます。

innerTextの構文はinnerHTMLとよく似ています。

document.getElementById("element").innerText = "これはテストです。";

このコードは、「element」というIDを持つ要素のテキスト値を「これはテストです。」に設定します。

これらのメソッドは、ブラウザの開発者ツールにあるJavaScriptコンソールで手軽に試せます。コンソールで要素を選択して値を代入すれば、その場でページのテキストが変化することを確認できます。たとえば、ページ上の最初のタグの内容を変更したり、テキストを置き換えたい場合にはinnerTextを使用します。インデックス1で指定した2番目の段落の内容が「これはテストです」に変わります。

JavaScriptでinnerHTMLとinnerTextを使ってみよう

それでは、実際にWebページ上のテキストを変更する例を見ていきましょう。ここでは、HTMLに関する質問を表示するシンプルなフラッシュカードWebページを作成します。「答えを見る」ボタンをクリックすると、質問への回答が表示される仕組みです。

Webページを作成する

まず、フロントエンド用のindex.htmlファイルを作成します。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML フラッシュカードアプリ</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <div class="flashcard">
            <h2>ハイパーリンクはテキストにしか使えない？</h2>
            <p>「答えを見る」ボタンを押すと答えが表示されます</p>
            <button id="showAnswer">答えを見る</button>
            <br /> <br />
            <div id="showMessage"></div>
        </div>
        <script src="./scripts.js"></script>
    </body>
</html>

このページでは、3つの要素を含むコンテナを作成しています。1つ目はユーザーへの質問、2つ目は答えの表示方法についての説明文、そして最後に答えを表示するためのボタンです。

続いて、CSSファイル（styles.css）にスタイルを追加して、ページを見栄え良くしていきます。

.flashcard {
    margin: auto;
    width: 50%;
    padding: 50px;
    margin-top: 10%;
    background-color: lightgreen;
    text-align: center;
}

button {
    border: none;
    background-color: hotpink;
    padding: 10px;
    border-radius: 10px;
}

この時点でブラウザを確認すると、フラッシュカードらしい見た目になり、ボタンにもスタイルが適用されていることがわかります。

JavaScriptのinnerHTMLとinnerTextでテキストを変更する

次に、ボタンがクリックされたときに答えが表示されるようにします。まず、JavaScriptコードで使用するテキスト要素とボタン要素を選択します。以下のコードはすべてscripts.jsファイルに記述します。

var answerText = document.querySelector('p');
var button = document.querySelector('button');

続いて、ボタンがクリックされたときに答えを表示するJavaScript関数を作成します。

function showAnswer() {
    answerText.innerText = "いいえ。ハイパーリンクはテキストにも画像にも使えます。";
}

ボタン押下時にこの関数を実行するため、シンプルなイベントリスナーを登録します。このリスナーはボタンのクリックを検知します。

button.addEventListener('click', showAnswer);

これでフラッシュカードアプリの完成です。Webページを開いて「答えを見る」ボタンをクリックすると、段落のテキストが答えを表示する内容に変わります。

JavaScriptのinnerHTMLとinnerTextの使い方と違いを徹底解説

さらに、JavaScriptのinnerHTMLを使って機能を追加することもできます。たとえば、ボタンがクリックされたときにフラッシュカードの下部に赤色のメッセージを表示したい場合は、次のようなコードになります。

var message = document.querySelector('#showMessage');

function showAnswer() {
    answerText.innerText = "いいえ。ハイパーリンクはテキストにも画像にも使えます。";
    message.innerHTML = "<span style='color:red;'>答えを表示しました。</span>";
}

修正したshowAnswer()関数と新しいセレクタでコードを実行すると、ボタンをクリックしたときに赤いメッセージが表示されます。

ここではinnerHTMLメソッドを使って、HTMLのタグをサイトに追加しました。このタグにより、ユーザーが「答えを見る」ボタンを押したときに赤色で表示されるメッセージが実現できます。

JavaScriptのinnerTextとinnerHTMLの違い

innerTextとinnerHTMLはどちらも、タグの内容にアクセスして変更できるプロパティですが、返される内容に違いがあります。

innerText：テキストのみを返します。子孫要素や余白（スペーシング）は含まれません。
innerHTML：子孫要素や余白を含む、HTMLタグごと文字列として返します。

要素の内容をプレーンテキストとして確認したい場合はinnerTextを、文字列内のすべてのHTMLタグを確認したい場合はinnerHTMLを使うのが適切です。

まとめると、innerTextはプレーンテキストを操作するためのものであり、innerHTMLは文字列としてのHTMLを操作するためのものだと言えます。

なお、innerTextとinnerHTMLはどちらもモダンブラウザで広くサポートされています。

まとめ

innerTextとinnerHTMLは、HTML DOMを操作するためのプロパティです。innerTextは要素のテキスト内容のみを返し、innerHTMLは余白や子孫要素を含む要素の内容全体を返します。

最後に、少し挑戦的な課題です。上記のコードを改良して、ボタンを2回クリックしたときに答えを非表示にできるようにしてみましょう。実装すべき仕様は次のとおりです。

ユーザーがボタンをクリックしたときに答えを隠す
答えが表示されている間は、ボタンのテキストを「答えを見る」から「答えを隠す」に変更する
ユーザーが「答えを隠す」を押した後も、「答えを表示しました」というメッセージは残しておく

JavaScriptをさらに学びたい方は、初心者向けのJavaScriptチュートリアルガイドもぜひ参考にしてください。

JavaScriptのsplit()メソッド徹底解説：文字列を配列に分割するステップバイステップガイド

JavaScriptでページを再読み込みする方法：location.reload()の使い方を解説

JavaScriptでinnerHTMLを設定する方法をわかりやすく解説
JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド
【完全ガイド】MacでPage Up／Page Downキーを使う方法とショートカット早見表
Windowsのパソコンでは、すべてのキーボードにPage Up（ページアップ）／Page Down（ページダウン）キーが標準搭載されています。独立したキーとして配置されている場合もあれば、Fn（ファンクション）キーに組み込まれている場合もあります。Page UpキーとPage Downキーは、ページ数の多いドキュメントを読んだり編集したりする際にとても便利なキーです。これらのキーを使えば、前後のページへ素早くジャンプでき、作業時間の大幅な節約につながります。MacキーボードでのPage Up／Page Downの使い方フルサイズのMacキーボードには、Page Up／Page Downキーが