innerHTMLでHTMLを操作しよう

1. HTMLの中身を書き換える

JavaScriptを使うと、HTMLに表示されている文字やタグを、あとから書き換えることができます。

はじめに、次のようなHTMLがあるとします。

<h1 id="a">ここが書き変わるよ</h1>

この例では、h1タグに id="a"が設定されています。

h1タグの中身である「ここが書き変わるよ」を変更するには、次のように書きます。

document.getElementById('a').innerHTML = '書き換わったよ！';

2. getElementById()の意味

次の部分は、HTMLの中から指定したidを持つ要素を探しています。

document.getElementById('a')

日本語にすると、 「HTMLの中から、idがaである要素を取得しなさい」 という意味です。

重要： 同じHTMLファイルの中で、同じidを複数の要素につけてはいけません。 idは、ページ内で一つだけになるようにします。

部分	意味
`document`	現在表示しているHTML文書
`getElementById('a')`	idがaである要素を探して取得する
`.innerHTML`	取得した要素の、開始タグと終了タグに挟まれた中身

3. innerHTMLとは

innerHTMLには、要素の開始タグと終了タグに挟まれた部分が入っています。

<h1 id="a">ここが書き変わるよ</h1>

この場合、次の式が表す内容は「ここが書き変わるよ」です。

document.getElementById('a').innerHTML

現在の中身を確認したい場合は、 alert()を使うこともできます。

alert(document.getElementById('a').innerHTML);

4. 「=」を使って中身を書き換える

中身を書き換えるときは、代入を表す =を使います。

document.getElementById('a').innerHTML = '新しい内容';

この命令を実行すると、もともと入っていた内容は消え、「新しい内容」に置き換わります。

実行してみよう

ここが書き変わるよ

5. 「+=」を使って内容を追加する

もとの内容を消さずに、新しい内容を後ろにつなげたいときは、 +=を使います。

document.getElementById('sample').innerHTML += 'hoge';

この命令を繰り返し実行すると、文字列 hogeが次々につながっていきます。

実行してみよう

ポイント：
= は「内容を入れ替える」、
+= は「現在の内容の後ろに追加する」と覚えましょう。

6. HTMLタグを入れることもできる

innerHTMLには、普通の文字だけでなく、HTMLタグを含む文字列も代入できます。

document.getElementById('result').innerHTML
  = '<strong>太字で表示されます</strong>';

実行例

ここに結果が表示されます。

7. ボタンをクリックして実行する

ボタンをクリックしたときにJavaScriptを実行するには、 onclickを使います。

<button onclick="changeMessage()">実行</button>

<p id="message">変更前の文章です。</p>

<script>
  function changeMessage() {
    document.getElementById('message').innerHTML
      = '変更後の文章です。';
  }
</script>

ボタンをクリックすると、changeMessage()という関数が実行され、 idがmessageである要素の中身が書き換わります。

9. 確認問題

idがtitleである要素の中身を「JavaScript入門」に書き換えてください。
idがoutputである要素に、「こんにちは」を追加してください。
ボタンをクリックすると、idがanswerである要素に「正解です！」と表示されるプログラムを書いてください。

解答例を見る

// 問題1
document.getElementById('title').innerHTML = 'JavaScript入門';

// 問題2
document.getElementById('output').innerHTML += 'こんにちは';

// 問題3
function showAnswer() {
  document.getElementById('answer').innerHTML = '正解です！';
}

まとめ

書き方	役割
`document.getElementById('id名')`	指定したidを持つ要素を取得する
`.innerHTML`	要素の中身を取得・変更する
`=`	もとの内容を新しい内容に置き換える
`+=`	もとの内容を残して後ろに追加する