Yugien - 遊戯苑
テーマ

JavaScript

この記事では、HTML要素の中身を読み取ったり書き換えたりするJavaScriptのinnerHTMLプロパティと、利用時の注意点を説明します。

JavaScript innerHTML property.

innerHTML

　innerHTMLは、HTML要素の中身を変更する際に使用する Elementオブジェクトのプロパティです。

　Elementオブジェクトは、HTMLのエレメント（要素）を表すオブジェクトです。

　div要素など、HTML要素の内容を自由に変更できることによって、動的な Webページの作成が可能になります。

Sample 1　文字列を書き換えてみる

　まず、書き換えたい要素に、ここでは test と名前を付けます。


<p id="test">innerHTML で文字列を書き換えてみる</p>

JavaScript実行“前”のサンプル

innerHTMLで文字列を書き換えてみる

　次に、innerHTMLを実行するための JavaScriptを作ります。

　JavaScriptは、上から順番に処理されるため、先ほど名前を付けた p要素の後ろで、script要素を使って処理します。（onloadを使ってページ読み込み完了後に処理させれば<head>〜</head>に書くこともできます）


<p id="test">innerHTML で文字列を書き換えてみる</p>

<script>
</script>

　まずは、どこを書き換えるのかを指示するために、上で id="test" と名前を付けた要素が、ドキュメント（document）の中のどの場所にあるのかを getElementById を使って探します。探した場所を変数 elem に代入します。


<p id="test">innerHTML で文字列を書き換えてみる</p>

<script>
var elem = document.getElementById("test");
</script>

　次に、場所を代入した変数 elem に innerHTML を使って、書き換えたい文字列を伝えます。ここでは、「 innerHTML で書き換えられた文字列 」と書き換えています。


<p id="test">innerHTML で文字列を書き換えてみる</p>

<script>
var elem = document.getElementById("test");
elem.innerHTML = "innerHTML で書き換えられた文字列";
</script>

　これで、完成です。

　これを実行すると、下記サンプルのような結果になります。

JavaScript実行“後”のサンプル

innerHTMLで文字列を書き換えてみる

スクリプトを省略してみる

　上で作ったスクリプトを省略して、書き直してみました。動作は、まったく同じです。


<p id="test2">innerHTML で文字列を書き換えてみる</p>

<script>
document.getElementById("test2").innerHTML = "innerHTML で書き換えられた文字列";
</script>

JavaScript実行“後”のサンプル

innerHTML で文字列を書き換えてみる

Sample 2　ボタンを使って文字列を書き換えてみる

　Sample 1 の文字列をボタンをクリックすることで書き換えるように設定してみました。

ボタンを使って文字列を書き換えてみるサンプル

innerHTML で文字列を書き換えてみる

　Sample 1 と同じように名前を付けた p要素を用意し、その下に input要素を使ってボタンを設置します。このボタンをクリックした時に JavaScriptが動くように onclickイベントを設置しておきます。


<input type="button" value="変更" onclick="reWrite()">

　onclickイベントには後ほど作る関数を呼び出したいので、ここでは「reWrite()」と名前を付けました。後ろにある「()」は、ここでは絶対付けなきゃいけない物としておきます。

　次に関数を作ります。先ほど関数の名前を「reWrite()」としましたので、


function reWrite() {
	
}

　これで、関数の外枠はできました。後は Sample1 で作ったスクリプトを入れ込むだけです。


function reWrite() {
	document.getElementById("test3").innerHTML = "innerHTML で書き換えられた文字列";
}

　これで完成です。

Sample 2 の全文


<p id="test3">innerHTML で文字列を書き換えてみる</p>
<form>
	<input type="button" value="変更" onclick="reWrite()">
</form>

<script>
function reWrite() {
	document.getElementById("test3").innerHTML = "innerHTML で書き換えられた文字列";
}
</script>

書く順番を変えてみる

　ちなみに、この Sample2のスクリプトは、head要素内に書くことができます。Sample1の時は head要素内に書いてしまうとブラウザが上から順番に読み込んで処理を行うため、p要素が表示される前に Scriptが処理されてしまい「idが test の p要素がない」というエラーになってしまいますが、Sample2の場合は、ボタンを押すまで処理が行われません。押すべきボタンが表示されるまでに全ての処理に必要なものがブラウザに読み込まれているため、エラーにはなりません。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>innerHTMLのテスト</title>
	<script>
		function reWrite() {
			document.getElementById("test3").innerHTML = "innerHTML で書き換えられた文字列";
		}
	</script>
</head>

<body>
	<p id="test3">innerHTML で文字列を書き換えてみる</p>
	<form>
		<input type="button" value="変更" onclick="reWrite()">
	</form>
</body>
</html>

　慣れないうちは無用なエラーを防止するためにも処理する順番に書いておき、慣れてきてからより見やすく、よりメンテナンスしやすく書き換えて行くことをお勧めします。

Sample 3　ボタンを２個使ってそれぞれ違った文字列に書き換えてみる

　Sample2で作った関数の処理を if 〜 else文を使って分けて、変更ボタンＡの処理と変更ボタンＢの処理を作る。

ボタンを２個使ってそれぞれ違った文字列に書き換えてみるサンプル

innerHTML で文字列を書き換えてみる

　Sample2と同様にボタンを準備するのですが、ここで先ほど関数の名前の後ろの「()」が役に立ちます。どちらのボタンが押されたのかを判別するために「引数」と呼ばれるものを渡すのですが、プログラミングでは数を数えるときに「0（ゼロ）」からスタートしますので、１個目に「0（ゼロ）」、２個目に「1」と設定します。

HTML source


<p id="test4">innerHTML で文字列を書き換えてみる</p>
<form>
	<input type="button" value="変更Ａ" onclick="reWrite2(0)">
	<input type="button" value="変更Ｂ" onclick="reWrite2(1)">
</form>

　続いて、if 〜 else文を使って２パターンの処理を作ります。


if (num==0) {
	引数が「0（ゼロ）」の時はパターン【Ａ】の処理
} else {
	引数が「0（ゼロ）」ではない時はパターン【Ｂ】の処理
}

　これを関数の中に書きます。

JavaScript source


function reWrite2(num) {
	if (num==0) {
		document.getElementById("test4").innerHTML = "innerHTML で パターン【Ａ】に書き換えられた文字列";
	} else {
		document.getElementById("test4").innerHTML = "innerHTML で パターン【Ｂ】に書き換えられた文字列";
	}
}

　関数の中の名前「reWrite(num)」の部分の「num」はボタンに設置した引数（数字）を受け取るための入れ物です。任意の名前をつけることができますが、ここでは数字（number）を受け取る入れ物なので略して「num」としました。

スクリプトを省略してみる

　Sample3のスクリプトの中で長めに２回繰り返し記述している部分があります。この繰り返し部分を変数の宣言を使って省略してみます。

JavaScript source


function reWrite2(num) {
	if (num==0) {
		document.getElementById("test4").innerHTML = "innerHTML で パターン【Ａ】に書き換えられた文字列";
	} else {
		document.getElementById("test4").innerHTML = "innerHTML で パターン【Ｂ】に書き換えられた文字列";
	}
}

JavaScript source


function reWrite2(num) {
	var elem = document.getElementById("test4");
	if (num==0) {
		elem.innerHTML = "innerHTML で パターン【Ａ】に書き換えられた文字列";
	} else {
		elem.innerHTML = "innerHTML で パターン【Ｂ】に書き換えられた文字列";
	}
}

　これにより、if文の中の処理文が短くなるのがわかると思います。

　このように省略の仕方を検討することにより、全体の文章をスッキリさせることが可能になります。また、後のメンテナンスのしやすさも変わってくるかもしれません。

　実際のスクリプトの処理速度にも影響するかもしれませんので、状況に応じて使い分ける必要がありそうです。

CSSで見やすくしてみる

　Sample3の文字列の切り替えは微妙な文字列の違いしかないので、見た目が分かりづらいかもしれません。そこでより見やすく CSSを使って文字列に色をつけて文字列が切り替わったことを伝わりやすくしてみます。

ボタンを２個使ってそれぞれ違った文字列に書き換えてみるサンプル

innerHTML で文字列を書き換えてみる

　まずは CSSを用意します。

CSS source


.pattern_a {
	font-weight: bold;
	color: #ee0000;
}

.pattern_b {
	font-weight: bold;
	color: #00bb00;
}

　次に、用意した CSSを適用させたい文字列に span要素を使って囲います。

JavaScript source


function reWrite3(num) {
	var elem = document.getElementById("test5");
	if (num==0) {
		elem.innerHTML = "innerHTML で <span class='pattern_a'>パターン【Ａ】</span>に書き換えられた文字列";
	} else {
		elem.innerHTML = "innerHTML で <span class='pattern_b'>パターン【Ｂ】</span>に書き換えられた文字列";
	}
}

　ここで注意したいのは、span要素の中の class属性で指定する際に「'（シングルクォーテーション）」を使っていることです。

　JavaScriptのコードの中ですでに「"（ダブルクォーテーション）」が使われているため、それと区別するために「'（シングルクォーテーション）」を使っています。

⭕ Correct writing


elem.innerHTML = "innerHTML で <span class='pattern_a'>パターン【Ａ】</span>に書き換えられた文字列";

❌ Wrong writing


elem.innerHTML = "innerHTML で <span class="pattern_a">パターン【Ａ】</span>に書き換えられた文字列";

　色分けしてみましたが、誤ってどちらにも「"（ダブルクォーテーション）」を使ってしまうと「始まりの位置」と「終わりの位置」をコンピュータが間違えてしまいエラーとなってしまいます。

Sample 4　テキストボックスの文字列を安全に表示する

　テキストボックスに文字列を入力してから「Change」ボタンを押すと、入力された文字列がそのまま表示されます。ユーザー入力をHTMLとして解釈させず、文字として表示する場合は、textContentを使います。入力値をそのままinnerHTMLへ代入すると、意図しないHTMLとして解釈されるおそれがあるためです。

テキストボックスに書かれた文字列に書き換えてみるサンプル

innerHTML で文字列を書き換えてみる

HTML source


<p id="test6" role="status" aria-live="polite" aria-atomic="true">innerHTML で文字列を書き換えてみる</p>
<form>
	<label for="myText">表示する文字列：</label>
	<input type="text" id="myText" placeholder="Enter text">
	<input type="button" value="Change" onclick="reWrite4()">
</form>

JavaScript source


let changeText = document.getElementById('myText');

function reWrite4() {
	document.getElementById("test6").textContent = changeText.value;
}