shirushiru

7年 ago

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

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

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

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

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

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

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

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

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

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

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

これは、appendToの逆。

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

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

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

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

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

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

これは、afterの逆ですね。

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

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

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

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

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

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

こっちは全体を。

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

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

これは中をwrapする。

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

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

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

shirushiru: