js STUDIO

.insertBefore()

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

.insertBefore( target ) 1.0追加

戻り値:jQuery

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

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

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

補足事項

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

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

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

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

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

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

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

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

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

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

ただし、マッチした要素が複数ある場合は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>
<div id="foo">ID:fooのDIV要素</div>
<p> P要素 </p>
<script>$("p").insertBefore("#foo");</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM