【jQuery】すぐわかる 要素の追加メソッドまとめ

意外と忘れやすい、jQueryの要素追加メソッド


私だけかもしれませんが、、ちょっと使っていないと結構忘れちゃう、要素を追加するメソッド。

備忘録としてまとめておきます。初心者の方も、これさえ押さえれば十分だと思います!

append


これ、一番使うやつです。個人的には。

$('ul').append('<li>子要素の一番後ろに追加したよ!</li>')


親要素に、追加するやつですね。複数の子要素があれば、一番最後に追加されます。

appendTo

これは、「append」の違う書き方。
appendが、「XXに**を追加する」と書くのに対して、appendToは「**をXXに追加する」と書きます。

$('<li>子要素の一番後ろに追加したよ!</li>').appendTo('ul');


prepend


これは、appendの逆、子要素の一番前に追加するやつです。

$('ul').prepend('<li>子要素の一番前に追加したよ!</li>');


prependTo


これは、appendToの逆。

$('<li>子要素の一番前に追加したよ!</li>').prependTo('ul');


after


要素の後ろに追加するやつです。

$('ul').after('<div>要素の後ろに追加したよ!</div>');


append と違い、子要素ではなく、要素の外、上記のjsで言うところの「ul」の後の要素として、「div」が追加されるってことです。

insertAfter


after との違いは、「ul」の後にあらかじめ要素があったとしたら、その要素の前に”挿入”されるってことです。直後の要素として追加されるって感じですね。

$('<div>要素の後ろに挿入したよ!</div>').insertAfter('ul');


before


これは、afterの逆ですね。

$('ul').before('<div>要素の前に追加したよ!</div>');


insertBefore


これも、「insertAfter」の逆バージョン。

$('<div>要素の前に挿入したよ!</div>').insertBefore('ul');


wrap


「wrap」っていう名前の通り、要素を包むメソッド。

$('a').wrap('<div />');


こうやると、aタグ一つ一つをdivで囲むことができるわけです。

wrapAll


こっちは全体を。

$('a').wrapAll('<div />');


aタグが並んでいた場合に、全てを一つのdivで囲ってあげることができます。

wrapInner


これは中をwrapする。

$('li').wrapInner('<span />');


li要素の中のテキストを、spanで囲ってあげることができる。



まだまだいっぱいあると思いますが、基本のキとなる、jQueryの要素追加メソッドでした。

あわせて読みたい