jQueryオブジェクト14
要素を移動する3 - prepend
ソースコード【 HTML 】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を移動する3 - prepend</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #basket { width: 400px; /* [ 20px ]は文字分の高さ */ height: 320px; background-color: #FF9; } #apple { width: 300px; height: 100px; background-color: #CFC; } #banana { width: 300px; height: 100px; background-color: #9FC; } #orange { width: 300px; height: 100px; background-color: #699; } </style> </head> <body> <!-- [ basket ]が最後に来る --> <div id="basket">basket</div> <div id="apple">apple</div> <div id="banana">banana</div> <div id="orange">orange</div> <script> $(function() { var basket = $('#basket'); var apple = $('#apple'); var banana = $('#banana'); var orenge = $('#orenge'); basket.prepend(apple); basket.prepend(banana); basket.prepend(orange); }); </script> </body> </html>
ブラウザで表示【 Chrome 】
- 移動前
- 移動後