append／appendToメソッドを利用すると、生成した要素を目的の位置に追加していくことができます。
スポンサーリンク
正確には、append／appendToメソッドによって、生成した要素をある要素の子要素の最後に挿入することができます。
デモ画面では、ボタンをクリックすると<p>サンプル</p>が追加されていくのが、分かります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>要素の追加</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> *{margin:0;} </style> <head> <body> <button id="button">要素を追加する</button> <div id="sample"> <p>元からあるサンプル</p> </ul> <script> $(function(){ $('#button').on('click', function(){ const element = $('<p>サンプル</p>'); $('#sample').append(element); }); }); </script> </body> </html> |
25行目
$()関数に生成したい要素を設定しています。つまりelementという名前の変数には、jQueryオブジェクトが挿入されます。今回は要素として、<p>サンプル</p>を設定しています。
関連ページ
基本セレクタについて[要素][id][クラス][jQuery]
26行目
appendメソッドの引数として指定できるのは、<li></li>などのようにタグで囲まれた要素（Elemtnt）のみです。
ボタンを1回クリックすると、<div id=”sample”>〜</div>の中の子要素の最後、つまり<p>元からあるサンプル</p>の次に要素が追加されていくのが分かります。要素については、関連ページをご参照下さい。
関連ページ
getElementByIdについて[DOM][ノード][Element]
appendToメソッドは、appendメソッドとjQueryオブジェクトと引数が逆になります。上記のデモ画面コードの26行目は下記のように置き換えられます。
|
1 |
$('#sample').append(element); |
↓appendToメソッドで置き換える
|
1 |
$(element).appendTo('#sample'); |
append／appendToメソッドは子要素の最後に追加されますが、prepend／prependToメソッドを利用すると、子要素の先頭に追加されます。
|
1 |
$('#sample').prepend(element); |
要素を移動させる
append／appendToメソッドを利用して、すでに存在する要素を移動させることもできます。下記デモ画面では、サンプル1の要素の中に、サンプル2要素を移動させています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>要素を移動させる</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> *{margin:0;} #sample1{height:150px; width:150px; background:green;} #sample2{height:50px; width:100px; background:red;} </style> <head> <body> <button id="button">要素を移動させる</button> <div id = "sample1">サンプル1</div> <div id = "sample2">サンプル2</div> <script> $(function(){ $('#button').on('click', function(){ const sample2 = $('#sample2'); $('#sample1').append(sample2); }); }); </script> </body> </html> |
本記事では説明しませんが、append／appendToメソッドと同様に、要素を追加／移動するメソッドとして他にも下記のようなものがあります。
| before／insertBefore | 兄弟要素の前に追加 |
| after／insertAfter | 兄弟要素の後に追加 |
