JavaScriptでhtmlを書き換える：innerHTML

JavaScriptはブラウザ上の要素を操作することができます。

インタラクティブなWebコンテンツを作成するときは、必ずと言っていいほど、すでにあるhtmlを動的に書き換えてユーザにコンテンツを提供します。

今回はJavaScriptでhtmlを操作するためのinnerHTMLプロパティを紹介します。

コンテンツの中身を書き換える

まず、htmlの要素を取得してきます。

ここではdocument.getElementsById()関数で要素を取得してきます。

elemには指定したIDがつけられた要素が取得できると思います。

ここで取得してきたelemのinnerHTMLプロパティに文字列を入れることで要素を書き換えることができます。

ボタンが押されたときに、この動作を実行する関数を呼び出すと、ボタンと連動してコンテンツが変化するWebページを作成することが可能です。

タグを書き込む

innerHTMLプロパティには文字列だけではなくタグも入れることができます。

コンテンツを書き換えるプロパティには、他にもinnerTextやtextContentがあるのですが、タグを入れてもタグを文字列として表示します。

innerHTMLはタグをタグとしてHTMLに書き込むことができるので便利です。