ここでは、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>