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

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

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

innerHTMLを設定する正しい構文

innerHTMLを設定する際の正しい構文は以下のとおりです。

document.getElementById("yourIdName").innerHTML="yourValue";

この構文では、まずgetElementById()メソッドを使って対象の要素をIDで取得し、その要素のinnerHTMLプロパティに新しい値（HTML文字列）を代入します。代入された文字列はHTMLとして解析され、ブラウザ上にレンダリングされます。

innerHTMLの設定例（サンプルコード）

それでは、実際にinnerHTMLを設定するサンプルコードを見ていきましょう。以下の例では、ページ読み込み時にIDが「test」の段落要素へメッセージを挿入しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<label>
Username:<input type="text" />
</label>
<p id="test"></p>
<script>
    document.getElementById('test').innerHTML = 'Enter Some value into the text box';
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」として保存し、ファイルを右クリックします。その後、VS Codeエディタで「Open with Live Server」オプションを選択してください。Live Serverが起動し、ブラウザ上で結果を確認できます。

実行結果

上記のプログラムを実行すると、以下のような出力が得られます。テキストボックスの下に、JavaScriptで挿入したメッセージが表示されます。

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

補足：textContentとの違いと注意点

innerHTMLはHTMLタグを含む文字列をそのまま反映できる一方、ユーザー入力などをそのまま挿入するとXSS（クロスサイトスクリプティング）のリスクが生じます。単純なテキストを表示するだけの場合は、HTMLを解析しないtextContentプロパティを使う方が安全です。用途に応じて両者を使い分けることをおすすめします。


  1. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト

  2. JavaScriptで独自のSetクラスを実装する方法【和集合・差集合の実装例つき】

    セット(Set)は、重複しない値のコレクションを扱うための基本的なデータ構造です。JavaScriptには標準で組み込みのSetオブジェクトが用意されていますが、その内部動作を理解するには、独自のMySetクラスをゼロから実装してみるのが効果的です。 以下は、基本操作(追加・削除・検索・クリア)、反復処理、そして和集合と差集合を求める静的メソッドまでを含んだ、MySetクラスの完全な実装例です。 MySetクラスの実装例 class MySet { constructor() { this.container = {}; } display() {