今回はJQueyを使用して指定した要素の前方や後方に要素を挿入する便利な方法があるのでご紹介してきたいと思います。
JQueryは物凄く簡単なので非常にありがたいですね。
本日も図を入れてるので見れば一発で理解できますからご安心してくださいね！
それではいってみましょうヽ(*^^*)ノ
Menu
サンプルHTML
1 2 3 4 5 | <div class="sample"> <p>1</p> <p>2</p> <p>3</p> </div> |
head内にJQueryライブラリーを読みこめるように下記を追加してください
1 | <script src="http://code.jquery.com/jquery-1.8.3.js"></script> |
兄弟要素のすぐ後ろに追加（afterとinsertAfter）
兄弟要素のすぐ後ろに追加されていきます。
こちらのふたつの挿入される位置は一緒になります。
違うところは記述方法です。
after
1 2 3 4 5 | $(function() { $(".sample").click(function() { $(this).after("<div><p>追加</p></div>"); }); }); |
insertAfter
1 2 3 4 5 | $(function() { $(".sample").click(function() { $("<div><p>追加</p></div>").insertAfter(this); }); }); |
動作確認
兄弟要素のすぐ前に追加（beforeとinsertBefore）
兄弟要素のすぐ前に追加されていきます。
こちらのふたつの挿入される位置は一緒になります。
違うところは記述方法です。
before
1 2 3 4 5 | $(function() { $(".sample").click(function() { $(this).before("<div><p>追加</p></div>"); }); }); |
insertBefore
1 2 3 4 5 | $(function() { $(".sample").click(function() { $("<div><p>追加</p></div>").insertBefore(this); }); }); |
動作確認
子の最後尾に追加（appendとappendTo）
子の最後尾に追加されていきます。
こちらのふたつの挿入される位置は一緒になります。
違うところは記述方法です。
append
1 2 3 4 5 | $(function() { $(".sample").click(function() { $(this).append("<div><p>追加</p></div>"); }); }); |
appendTo
1 2 3 4 5 | $(function() { $(".sample").click(function() { $("<div><p>追加</p></div>").appendTo(this); }); }); |
【動作確認】
子の先頭に追加（prependとprependTo）
子の先頭に追加されていきます。
こちらのふたつの挿入される位置は一緒になります。
違うところは記述方法です。
prepend
1 2 3 4 5 | $(function() { $(".sample").click(function() { $(this).prepend("<div><p>追加</p></div>"); }); }); |
prependTo
1 2 3 4 5 | $(function() { $(".sample").click(function() { $("<div><p>追加</p></div>").prependTo(this); }); }); |
【動作確認】
まとめ
今回は兄弟要素と子要素の前方と後方に挿入したい時に役立つJQueryの4パターンをデモしてみました。
兄弟要素と子要素に挿入した時のブラウザの表示とソース上のDOMの配置が違うところに気をつけてください。
このようにJQueryで階層を指定して挿入することは物凄く便利ですがDOMの構造をきちんと理解しないとある日突然不思議な現象が起こってしまうのでDOMの構造も少しずつ勉強していきましょう(*ﾟ▽ﾟ)ﾉ
以上ですヾ ^_^♪
