2007年5月27日(日) 13時24分42秒 [装飾・内容変更]

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

JavaScriptを使うと、特定のHTML要素の中身をごっそりまるごと動的に書き換えることができます。装飾を変更するレベルではなく、表示されている内容を何もかもまったく別の内容に変更することも可能です。うまく活用すると、いろいろおもしろいことができそうです。

例えば、以下のサンプルにあるボタンをクリックすると、その下にある文章がまったく異なるものに変化します。

上記のボタンをクリックすると、文章があった場所に画像が表示されたと思います。
これは、以下のHTMLソースとJavaScriptソースで実現しています。

HTMLソース：

<p id="sample">現在、ここに表示されているのはただの…</p>

JavaScriptソース：

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

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

上記のサンプルでは、「sampleというidが付加されたp要素」の内容を画像を表示する内容に書き換えています。
このように、innerHTMLプロパティを使うと、現在表示されている内容を自由に変更することができます。

上記のJavaScriptでは、getElementByIdメソッドを使っているので、内容を変更したい対象の要素をid名で指定します。ですから、変更したい対象の要素には、事前にid名を振っておきます。（上記の場合は「sample」）