特定の要素の中身をごっそり丸ごと書き換える方法

JavaScriptを使うと、特定のHTML要素の中身をごっそりまるごと動的に書き換えることができます。装飾を変更するレベルではなく、表示されている内容を何もかもまったく別の内容に変更することも可能です。JavaScriptで生成した何らかのデータを動的にウェブ上に表示する際によく使います。うまく活用すると、いろいろおもしろいことができそうです。
例えば、以下のサンプルにあるボタンをクリックすると、その下にある文章がまったく異なるものに変化します。

上記のボタンをクリックすると、それまで見ていた文章は消え去り、代わりに画像と短い文章が表示されます。
このように、表示されている内容を丸ごと変化させることができます。

特定の要素の中身を丸ごと全部書き換えるJavaScriptの書き方

ある要素の表示内容を丸ごと書き換えるには、以下のようなJavaScriptソースを使います。

(対象の要素).innerHTML = '置き換える内容';

上記のように、書き換えたい対象要素のinnerHTMLプロパティに文字列を代入すれば、「対称の要素」の中身が「置き換える内容」に変化します。
実際に使う場合は、書き換えたい対称の要素にはid属性を使ってid名を割り振っておき、getElementByIdメソッドを使って特定し、innerHTMLプロパティに文字列を代入すれば良いでしょう。
例えば以下のような感じで記述します。

document.getElementById('対象のid名').innerHTML = '置き換える内容';

「置き換える内容」には、単なるテキストだけでなく、HTMLでマークアップされた内容を含むこともできます。
例えば以下のように。

document.getElementById('target').innerHTML = '<strong>こんな感じに書き換わりました</strong>';

上記では、strong要素を含んだ文字列を指定していますから、対象要素(id=”target”)の中身もそのマークアップに変化します。
img要素を書けば画像が表示されますし、script要素を書けば指定のJavaScriptファイルを読み込むこともできます。
とにかく、HTML要素の中身を丸ごと書き換えるので、何でもやり放題です。(^_^;;;

特定の要素の中身を丸ごと全部書き換えるJavaScriptの例

冒頭で紹介した、ボタンクリックによって文章が画像に切り替わるサンプルは、以下のHTMLソースとJavaScriptソースで実現しています。

▼HTMLソース：

<p id="sample">現在、ここに表示されているのはただの文章です。上記のボタンをクリックすると、中身が大きく変化します。装飾が変化するのではなく、中身そのものが変わります。</p>

後からJavaScriptで中身を変化させるために、id属性を使って「sample」というid名を付加してあります。

▼JavaScriptソース：

document.getElementById('sample').innerHTML = '<img src="seabed.jpg" alt="海底写真" />海底の写真に変わりました～。';

上記のJavaScriptでは、先程のid="sample"で示される要素のinnerHTMLプロパティの値を、画像と文章を表示する内容に書き換えています。

1. まず、document.getElementById('sample') で、対象の要素を特定します。
2. 次に、.innerHTML で、対象の要素のinnerHTMLプロパティを参照します。
3. そこへ、<img src="seabed.jpg" alt="海底写真" />海底の写真に変わりました～。' というHTMLを丸ごと代入しています。

innerHTMLプロパティは、指定されたHTML要素の「内容」を示しています。(※内容にさらに子要素が含まれている場合は、それらも全部合わせて。)
innerHTMLプロパティにHTMLソースなどを代入すれば、指定されたHTML要素の内容をごっそり丸ごと全部書き換えることができます。

このように、innerHTMLプロパティを使うと、現在ウェブ上に表示されている内容を自由自在に変更できます。
なかなか便利です。

(更新日：2017年06月08日)