このページの本文へ

サンプルで学ぶjQuery:(X)HTML/CSSを操作する (3/7)

2009年08月06日 11時55分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

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>


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています