にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

特定の要素の中身をごっそり書き換える方法 [装飾・内容変更]

JavaScriptを使って特定のHTML要素の内容をごっそり丸ごと違う内容に書き換えるには、innerHTMLプロパティの値を書き換えるだけです。とても簡単に要素の中身を丸ごと異なる内容に変化させられます。JavaScriptで生成した何らかのデータを動的にウェブ上に表示する際によく使います。

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

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プロパティを使うと、現在ウェブ上に表示されている内容を自由自在に変更できます。
なかなか便利です。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---