jQuery「prepend」要素内の先頭に、要素、HTML、jQueryオブジェクトを挿入する

.before()は要素の「前」にコンテンツを追加しますが、.prependは要素内の先頭にコンテンツを追加します例えば

$('.header').before('<p>Hello</p>');

では、結果が

<p>Hello</p>
<div class="header">ヘッダ</div>

$('.header').prepend('<p>Hello</p>');

では

<div class="header"><p>Hello</p>ヘッダ</div>

となります。また、挿入する要素としてページ内に既存の要素を指定した場合、その要素は複製されるのではなく、指定した場所に移動されます。類似のメソッドに「.prependTo()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4からは、引数としてクロージャを指定できるようになりました。これにより、要素に指定するクラス名を動的に変化させられるようになります。

サンプル

ヘッダブロックの先頭に、1文字挿入する

 <body>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <div class="sticky">
          <p>鮭おにぎり</p>
        </div>
        <div class="sticky">
          <p>のりおにぎり</p>
        </div>
        <div class="sticky">
          <p>梅干しおにぎり</p>
        </div>
        <div class="sticky">
          <p>タラコおにぎり</p>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $('.header').prepend($('<p>jQuery</p>'));
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery