Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:49.

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

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」)

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど