JavaScript 変数を HTML 本文に表示する方法

ページに JavaScript 変数をテキストとして表示するには、既存の HTML 要素を選択し、その textContent プロパティに値を代入します。これにより、ドキュメント本文内の要素が更新されます。ダイアログは開きません。スクリプトは対象要素の後に配置するか、ドキュメントの解析が終わった後に実行されるようにしてください。

textContent を使って JavaScript 変数を HTML 本文に表示する

以下の例では、変数を段落内に配置しています。インラインスクリプトがその段落の後に続くため、代入が実行されるときに document.getElementById("greeting") で要素を見つけられます。name を表示したい値に変更してください。すると、ブラウザは “Hello, Robert!” をページ内の通常のテキストとして表示します。変更されていないサンプルの出力は英語のままです。

この例を実行します：

このセクションのコードと表示されるラベルや出力は英語のままです。

const output = { textContent: "" };
const document = {
  getElementById(id) {
    return id === "greeting" ? output : null;
  }
};
const name = "Robert";
document.getElementById("greeting").textContent = `Hello, ${name}!`;
console.log(output.textContent);

Hello, Robert!

この小さな実行可能な例では、JavaScript ランタイムで代入を実行できるように、要素の最小限の代用を使用しています。ブラウザでは、ここで示すように実際の DOM 要素を使用します：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Greeting</title>
</head>
<body>
  <p id="greeting"></p>
  <script>
    const name = "Robert";
    document.getElementById("greeting").textContent = `Hello, ${name}!`;
  </script>
</body>
</html>

プレーンテキストには、textContent が最も明確な選択です。選択した要素の子コンテンツをテキストで置き換えるため、変数内のマークアップのような文字は HTML として解析されず、そのまま表示されます。セレクタが要素を返さない場合は、ページ構造やスクリプトの実行タイミングに注意が必要です。ID が一致していること、代入が実行される前に対象が存在することを確認してください。ドキュメントの head 内にある古典的な外部スクリプトは、defer を使うことで、ドキュメントの解析後に実行できます。defer は古典的なインラインスクリプトを遅延させません。インラインスクリプトが head 内にある場合は、対象要素が存在するまで待ってください。たとえば、DOMContentLoaded をリッスンするか、上記の例のようにスクリプトを要素の後に配置します。

innerHTML は信頼できる HTML を挿入するときだけ使う

innerHTML は、代入された値をマークアップとして解析し、要素の子ノードを置き換えます。この動作は、意図する値が自分で制御できる HTML である場合に便利です。たとえば、意図的に構築した強調要素などです。名前やメッセージ、その他のプレーンテキストの変数には、textContent を使い続けてください。外部のテキストやユーザーが提供したテキストをマークアップとして扱うと、クロスサイトスクリプティングの脆弱性を生むおそれがあります。

たとえば、"<strong>Hello</strong>" を textContent に代入すると、山括弧とタグがテキストとして表示されます。同じ文字列を innerHTML に代入すると、太字の Hello 要素が作成されます。値がテキストであるべきか、信頼できるマークアップであるべきかに基づいて選択し、信頼できない値を連結して HTML を構築することは避けてください。

document.write() と window.alert() が本文テキストの出力と同等ではない理由

document.write() は、ブラウザがページを解析している間にドキュメントストリームへ書き込むメソッドです。解析時に実行される例では動作しているように見えるかもしれませんが、既存の要素を更新するのに適した方法ではありません。ドキュメントの読み込みが終わった後に呼び出すと、ドキュメントが置き換えられることがあるため、通常のページ更新には textContent のような DOM メソッドを使用してください。

window.alert() もメソッドですが、読み手が閉じる必要のある一時的なダイアログを表示します。その値はページの HTML 本文に挿入されず、ダイアログが開いている間は操作が中断されます。ダイアログが特に適している場合にのみ使用し、値をページに表示し続けたい場合は textContent を使用してください。