.prependTo()

要素を指定したエレメント内の一番前に追加します。

.prependTo( target ) 1.0追加

戻り値:jQuery

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

補足事項

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

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

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

  1. <h2>ようこそ</h2>
  2. <div class="container">
  3. <div class="inner">こんにちは</div>
  4. <div class="inner">さようなら</div>
  5. </div>

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

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

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

  1. <h2>ようこそ</h2>
  2. <div class="container">
  3. <div class="inner">
  4. <p>テスト</p>
  5. こんにちは
  6. </div>
  7. <div class="inner">
  8. <p>テスト</p>
  9. さようなら
  10. </div>
  11. </div>

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

  1. $('h2').prependTo($('.container'));

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

  1. <div class="container">
  2. <h2>ようそこ</h2>
  3. <div class="inner">こんにちは</div>
  4. <div class="inner">さようなら</div>
  5. </div>

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

デモ

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>#foo { background:yellow; }</style>
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. </head>
  7. <body>
  8. <div id="foo">ID:fooのDIV要素 </div>
  9. <span>SPAN要素</span>
  10. <script>$("span").prependTo("#foo");</script>
  11. </body>
  12. </html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM