Web制作の現場で使えるjQuery UIデザイン入門 ― 第5回
サンプルで学ぶjQuery：(X)HTML/CSSを操作する
2009年08月06日 11時55分更新
2．(X)HTMLの変更と取得
text() ではテキストを操作できましたが、(X)HTMLのタグを含むテキストを操作したい場合は、html() という命令を利用します。
■(X)HTMLの変更
html()を利用して(X)HTMLを変更するには、html(...)の内側に変更後の(X)HTMLを記述します。
▼サンプルコード（スクリプト部分）
$("p#first").html("<strong>変更後</strong>");
上記のサンプルコードを実行すると、id属性にfirstが設定されているp要素の内容が、「<strong>変更後</strong>」に変更されます。
▼サンプルコード（元の(X)HTML部分）
<p id="first">変更前</p>
▼実行結果（実際のWebページ）
<p id="first"><strong>変更後</strong></p>
■(X)HTMLの取得
(X)HTMLの取得にも html() を使います。text() でテキストを取得する場合と同じく、括弧内には何も記述しません。
▼サンプルコード（スクリプト部分）
$("p#first").html();
以下のサンプルでは、取得した<p id="first">～</p> の(X)HTMLで、<p id="second">～</p> を書き換えています。
▼サンプルコード（スクリプト部分）
$("p#second").html($("p#first").html());
▼サンプルコード（元の(X)HTML部分）
<p id="first"><strong>変更後</strong></p>
<p id="second">変更前</p>
▼実行結果（実際のWebページ）
<p id="first"><strong>変更後</strong></p>
<p id="second"><strong>変更後</strong></p>
3．(X)HTMLの挿入
html() を使うと、もともとの要素の内容がすべて書き換えられてしまいます。要素の内部を残したまま(X)HTMLを追加したい場合は、要素を挿入する prepend()/append()/before()/after() を利用します。
■(X)HTML要素内の先頭に挿入
指定した要素内部の先頭に(X)HTMLを挿入したいときは、prepend() を使います。prepend() は、html() と同じように追加したい(X)HTMLを括弧内に記述します。
▼サンプルコード（スクリプト部分）
$("p#first").prepend("<strong>先頭に挿入</strong>");
▼サンプルコード（元の(X)HTML部分）
<p id="first">テキストテキスト</p>
▼実行結果（実際のWebページ）
<p id="first"><strong>先頭に挿入</strong>テキストテキスト</p>
■(X)HTML要素内の最後に挿入
指定した要素内部の最後に(X)HTMLを挿入したい場合は、append() を利用します。append() も prepend() と同じく、追加したい(X)HTMLを括弧内に記述します。
▼サンプルコード（スクリプト部分）
$("p#first").append("<strong>最後に挿入</strong>");
▼サンプルコード（元の(X)HTML部分）
<p id="first">テキストテキスト</p>
▼実行結果（実際のWebページ）
<p id="first">テキストテキスト<strong>最後に挿入</strong></p>
■(X)HTML要素の前に挿入
指定した要素の前に(X)HTMLを挿入したい場合は、before() を利用します。
▼サンプルコード（スクリプト部分）
$("p#first").before("<h1>前に挿入</h1>");
▼サンプルコード（元の(X)HTML部分）
<p id="first">テキストテキスト</p>
▼実行結果（実際のWebページ）
<h1>前に挿入</h1>
<p id="first">テキストテキスト</p>
■(X)HTML要素の後ろに挿入
指定した要素の後ろに(X)HTMLを挿入したい場合は、after() を利用します。
▼サンプルコード（スクリプト部分）
$("p#first").after("<h1>後ろに挿入</h1>");
▼サンプルコード（元の(X)HTML部分）
<p id="first">テキストテキスト</p>
▼実行結果（実際のWebページ）
<p id="first">テキストテキスト</p>
<h1>後ろに挿入</h1>
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery＋CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応！jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー！プリロード対応版
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
