jQuery 「clone」要素を複製する

.clone()メソッドは、対象となる要素を複製します。「$(‘.header’).append($(‘h3’));」とした場合、h3要素は.header要素の末尾に移動されます。h3要素をコピーして挿入したい場合は、「$(‘h3’).clone().appendTo($(‘.header’));」のように、clone()メソッドで複製します。.clone()の引数には、複製にその要素に割り当てられたイベントハンドラを含めるかどうかをtrueまたはfalseで指定できます。省略した場合はfalse（イベントハンドラを含めない）が既定の動作になります。

書式

$( 対象要素 ).clone([true/false]);

$('#content').clone();
$('#content').clone(true);

サンプル

最初の付箋のdiv要素を複製してコンテンツブロックの末尾に追加し、内容を変更する

<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(){
        $('.sticky:first').clone().appendTo($('.content')).text('ツナマヨおにぎり');
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery