jQuery 「before」要素の前に、要素、HTML、jQueryオブジェクトを挿入する

条件にマッチした対象要素の直前にコンテンツを挿入します。コンテンツは、DOM要素、HTML文字列、jQueryオブジェクトのいずれでも指定可能です。類似のメソッドに「.insertBefore()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4から、引数としてクロージャを指定できるようになりました。これにより、追加するコンテンツを動的に変化させられるようになります。

書式

$( 対象要素 ).before( 内容 );
$( 対象要素 ).before( function() { 処理… } );

$('.footer').before(document.createTextNode('文字列を挿入します'));
$('.footer').before('<p>ここまで本文</p>');
$('.content').before(function(){
    return '<span>'+$(this).text + '</span>';
});

サンプル

<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(){
        $('.content').before($('<div class="desc"><p>おにぎり屋のメニュー</p>'));
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery