Web制作の現場で使えるjQuery UIデザイン入門 ― 第5回
サンプルで学ぶjQuery：(X)HTML/CSSを操作する
2009年08月06日 11時55分更新
4．(X)HTMLの移動
新規に(X)HTMLを追加するのではなく、既存の(X)HTML要素の出現位置も変更できます。
■(X)HTML要素内の先頭に移動
指定した(X)HTML要素を、他の要素の内部の先頭に移動したい場合は、prependTo() を利用します。prependTo() は括弧内に移動先の要素をセレクターで指定します。
▼サンプルコード（スクリプト部分）
$("strong").prependTo("p");
上記のサンプルを実行すると、strong要素をp要素の内側の先頭に移動します。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキスト</p>
<strong>先頭に移動</strong>
▼実行結果（実際のWebページ）
<p><strong>先頭に移動</strong>テキストテキスト</p>
■(X)HTML要素内の最後に移動
指定した要素を、他の要素の内部の最後に移動したい場合は、appendTo() を利用します。appendTo() も prependTo() と同様、移動先の要素をセレクターで指定します。
▼サンプルコード（スクリプト部分）
$("strong").appendTo("p");
上記のサンプルを実行すると、strong要素をp要素の内側の最後に移動します。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキスト</p>
<strong>最後に移動</strong>
▼実行結果（実際のWebページ）
<p>テキストテキスト<strong>最後に移動</strong></p>
■(X)HTML要素の前に移動
指定した要素を、他の要素の前に移動したい場合は、insertBefore() を利用します。insertBefore() は移動先の要素をセレクターで指定します。
▼サンプルコード（スクリプト部分）
$("h1").insertBefore("p");
上記のサンプルでは、h1要素をp要素の前に移動します。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキスト</p>
<h1>前に移動</h1>
▼実行結果（実際のWebページ）
<h1>前に移動</h1>
<p>テキストテキスト</p>
■(X)HTML要素の後ろに移動
指定した要素を、他の要素の後ろに移動したい場合は、insertAfter() を利用します。insertAfter() は移動先の要素をセレクターで指定します。
▼サンプルコード（スクリプト部分）
$("h1").insertAfter("p");
上記のサンプルでは、h1要素をp要素の後ろに移動します。
▼サンプルコード（元の(X)HTML部分）
<h1>後ろに移動</h1>
<p>テキストテキスト</p>
▼実行結果（実際のWebページ）
<p>テキストテキスト</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]")
