動かす・消す・作る
append/appendTo
- 要素を動かすためのメソッド
- ある要素を切り取り、別の要素のなかに付け加える
- append:付け加える
append
- 要素Aのなかに要素Bを移動させます
jQueryObjectA.append(jQueryObjectB);
《index.html》
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="jquery-1.7.1.min.js"></script> <script src="scripts.js"></script> </head> <body> <div id="basket">basket</div> <div id="apple">apple</div> <div id="banana">banana</div> <div id="orange">orange</div> </body> </html>
《style.css》
#basket{ background:#D9F0AF; padding:10px; } #apple{ background:red; margin:5px; } #banana{ background:yellow; margin:5px; } #orange{ background:orange; margin:5px; }
《script.js》
$(function(){ var basket = $('#basket'); var apple = $('#apple'); var banana = $('#banana'); var orange = $('#orange'); basket.append(apple); basket.append(banana); basket.append(orange); });
もともとHTMLでは、すべてのdivはbody要素の直下に配置されていますが、appendメソッドを使い、#apple、#banana、#orangeを#basketのなかに移動させています。
移動後は、次のような構造になります。
<div id="basket">basket <div id="apple">apple</div> <div id="banana">banana</div> <div id="orange">orange</div> </div>