js STUDIO

.insertAfter()

要素を指定した別エレメントの後ろに挿入します。

.insertAfter( target ) 1.0追加

戻り値:jQuery

引数 説明
target セレクタ、HTML文字列, DOM要素, jQueryオブジェクトのいずれかを指定し、この要素の後ろに マッチしている要素を挿入します。

補足事項

.after()と.insertAfter()は同じ働きをします。 大きな違いは「挿入される場所」と「挿入されるコンテンツ」の文法上の位置です。

element.after(target)
elementに「挿入される場所」、targetに「挿入するコンテンツ」
element.insertAfter(target)
elementに「挿入するコンテンツ」、targetに「挿入される場所」

次のようなコードがあった場合、

<div class="container">
  <h2>ようこそ</h2>
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

マッチする各要素の後ろにP要素を追加します。

$('<p>テスト</p>').insertAfter('.inner');

innerクラスを持つDIV要素は下記のように変更されます。

<div class="container">
  <h2>ようこそ</h2>
  <div class="inner">こんにちは</div>
  <p>テスト</p>
  <div class="inner">さようなら</div>
  <p>テスト</p>
</div>

また、ページ内のDOM要素を選択、挿入することも可能です。

$('h2').insertAfter($('.container'));

このコードが実行されると、クローンは作成されずマッチした要素の移動が行われます。

<div class="container">
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>
<h2>ようそこ</h2>

ただし、マッチした要素が複数ある場合は2つ目以降の挿入される要素はクローンのコピーが作成されます。

デモ

全てのP要素を、ID:fooのDIV要素の後ろに挿入します。 $("#foo").after("p")と同じ動作をします。 

<!DOCTYPE html>
<html>
<head>
<style>#foo { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p> P要素 </p>
<div id="foo">ID:fooのDIV要素</div>
<script>$("p").insertAfter("#foo");</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM