JavaScript innerHTML proparty.
innerHTMLは、HTML要素の中身を変更する際に使用する Elementオブジェクトのプロパティです。
Elementオブジェクトは、HTMLのエレメント（要素）を表すオブジェクトです。
div要素など、HTML要素の内容を自由に変更できることによって、動的な Webページの作成が可能になります。
まず、書き換えたい要素に、ここでは 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 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>
慣れないうちは無用なエラーを防止するためにも処理する順番に書いておき、慣れてきてからより見やすく、よりメンテナンスしやすく書き換えて行くことをお勧めします。
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文の中の処理文が短くなるのがわかると思います。
このように省略の仕方を検討することにより、全体の文章をスッキリさせることが可能になります。また、後のメンテナンスのしやすさも変わってくるかもしれません。
実際のスクリプトの処理速度にも影響するかもしれませんので、状況に応じて使い分ける必要がありそうです。
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>に書き換えられた文字列";
色分けしてみましたが、誤ってどちらにも「"（ダブルクォーテーション）」を使ってしまうと「始まりの位置」と「終わりの位置」をコンピュータが間違えてしまいエラーとなってしまいます。
テキストボックスに文字列を入力してから「Change」ボタンを押すと、「innerHTML で文字列を書き換えてみる」という文字列が、テキストボックスに入力された文字列に書き換わります。
テキストボックスに書かれた文字列に書き換えてみるサンプル
innerHTML で文字列を書き換えてみる
HTML source
<p id="test6">innerHTML で文字列を書き換えてみる</p>
<form>
<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").innerHTML = changeText.value;
}