[ jQuery ] DOM要素の移動とコピー ( jQuery.clone().appendTo )

Pocket

ここでは、jQuery を使用して DOM 要素の移動とコピーを行うサンプルを掲載しています。なお、DOM 要素とは div や table などの HTML の各種のタグのことを指しています。

スポンサーリンク

サンプルHTML

ここで使用するサンプルスクリプトは、以下の HTML を使用するものとします。

 <select id="sid">
     <option value="orange">オレンジ</option>
     <option value="apple">リンゴ</option>
 </select>

<div id="divid">要素を移動したりコピーしたり</div>

select タグを div タグ内に移動させるサンプル

    /*
     * セレクトタグをDIVタグ内に移動させる
     */
    $( "#sid" ).appendTo( "#divid" );

実行後の HTML の内容は以下の通りです。元々の select タグの内容は削除され、div タグ内に移動されていることが確認できます。

<div id="divid">要素を移動したりコピーしたり
      <select id="sid">
        <option value="orange">オレンジ</option>
        <option value="apple">リンゴ</option>
      </select>
</div>

要素をコピーするサンプル

    /*
     * セレクトタグをDIVタグ内にコピーする
     */
    $( "#sid" ).clone().appendTo( "#divid" );

実行結果は以下の通りです。元々の select タグの内容はそのままに、div タグ内にコピーされていることが確認できます

  <select id="sid">
     <option value="orange">オレンジ</option>
     <option value="apple">リンゴ</option>
  </select>

<div id="divid">要素を移動したりコピーしたり
     <select id="sid">
        <option value="orange">オレンジ</option>
        <option value="apple">リンゴ</option>
      </select>
</div>
参考
スポンサーリンク


Pocket

Leave a Comment

Your email address will not be published. Required fields are marked *