【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の要素追加メソッドでした。
