Web制作の現場で使えるjQuery　UIデザイン入門 ― 第5回

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

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>