frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

prepend、appendなどJQueryで要素を追加するメソッドまとめ

スポンサードリンク

JQueryで要素を追加する方法は沢山あります。
prepend、append、after、beforeは前後に追加する方法です。
.part1と.part2は結果は同じです。

.part1は$(A).メソッド(B)でAにBを入れる。
.part2は$(A).メソッド(B)でBにAを入れる。

という風にAとBが入れ替わるだけです。
個人的には.part1の方が覚えやすいかなと思いますが、他人のコードを読まなければいけないこともあるので.part2も覚えといて損はないです。

$(".part1").prepend("<b>prepend</b>");
$(".part1").append("<b>append</b>");
$(".part1").after("<b>after</b>");
$(".part1").before("<b>before</b>");

$("<b>prependTo</b>").prependTo(".part2");
$("<b>appendTo</b>").appendTo(".part2");
$("<b>insertBefore</b>").insertBefore(".part2");
$("<b>insertAfter</b>").insertAfter(".part2");

See the Pen vxQPVy by funclur (@funclur) on CodePen.