jQueryを使って、指定要素の前や後ろに差し込み、HTMLの操作/構造を編集する

  • このエントリーをはてなブックマークに追加

既存のHTMLだと、うまくカスタマイズできないことがある。jQueryが使用できる環境であれば、ASPでもパーツの位置を変更することができて、オリジナリティあふれるサイトに作り変えることが可能。

after—は指定タグの同階層後ろに挿入。before—は指定タグの同階層前に挿入する。子要素として挿入する時は、appendTo・append/prependTo・prependを使用する。

after()

コード例:
$(“.sample1”).after(“<p>追加</p>”);

.sample1の後ろに<p>追加</p>を追加する。

<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>

<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
<p>追加</p>

insertAfter()

コード例:
$(‘<div>追加</div>’).insertAfter(“.sample1”);

<div>追加</div>を、.sample1にの後ろに追加する。afterとは前後が逆になる。

AをBの後ろに追加するということ。

before()

コード例:
$(“.sample2”).before(“<div>追加</div>”);

.sample2の前に<div>追加</div>を追加する。

<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>

<p>追加</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>

insertBefore()

コード例:
$(‘<div>追加</div>’).prependTo(“.sample2”);

<div>追加</div>を、.sample2の前に追加する。beforeとは前後が逆になる。

AをBの前に追加するということ。