jQuery「appendTo() 」要素、HTML、jQueryオブジェクトを要素の末尾に挿入する

内容と対象要素の検索式が入れ替わることを除けば、動作は.append()メソッドと同様です。挿入する要素としてページ内の既存の要素を指定した場合、その要素は複製されるのではなく、指定した場所に移動します。

書式

$( 内容 ).appendTo( 対象要素 );

例

$('<p>ここから本文</p>').appendTo('.header');
$($('3')).appendTo('.header');

サンプル

コンテンツブロック内の最後に付箋のdivを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(){
        $('<div class="sticky"><p>おかかおにぎり</p></div>').appendTo($('.content'));
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery