【jQuery】要素を追加するメソッドまとめ

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

8つのメソッドをデモを添えて紹介します。

参考：JQueryの目的の場所に要素を追加

appendメソッド

指定した要素の最後に、appendの引数のコンテンツを追加する。

$('.hoge').append('<div>〇〇</div>');

See the Pen 【jQuery】要素を追加するメソッドまとめ① by 石森裕也 (@yuyaphotograph) on CodePen.

appendToメソッド

指定したコンテンツを、appendToの引数の要素の最後に追加する。

$('<div>〇〇</div>').appendTo('.hoge');

See the Pen 【jQuery】要素を追加するメソッドまとめ② by 石森裕也 (@yuyaphotograph) on CodePen.

prependメソッド

指定した要素の最初に、prependの引数のコンテンツを追加する。

$('.hoge').prepend('<div>〇〇</div>');

See the Pen 【jQuery】要素を追加するメソッドまとめ③ by 石森裕也 (@yuyaphotograph) on CodePen.

prependToメソッド

指定したコンテンツを、prependToの引数の要素の最初に追加する。

$('<div>〇〇</div>').prependTo('.hoge');

See the Pen 【jQuery】要素を追加するメソッドまとめ④ by 石森裕也 (@yuyaphotograph) on CodePen.

afterメソッド

指定した要素の直後に、afterの引数のコンテンツを追加する。

$('.hoge').after('<div>〇〇</div>');

See the Pen 【jQuery】要素を追加するメソッドまとめ⑤ by 石森裕也 (@yuyaphotograph) on CodePen.

insertAfterメソッド

指定したコンテンツを、insertAfterの引数の要素の直後に追加する。

$('<div>〇〇</div>').insertAfter('.hoge');

See the Pen 【jQuery】要素を追加するメソッドまとめ⑥ by 石森裕也 (@yuyaphotograph) on CodePen.

beforeメソッド

指定した要素の直前に、beforeの引数のコンテンツを追加する。

$('.hoge').before('<div>〇〇</div>');

See the Pen 【jQuery】要素を追加するメソッドまとめ⑦ by 石森裕也 (@yuyaphotograph) on CodePen.

insertBeforeメソッド

指定したコンテンツを、insertBeforeの引数の要素の直前に追加する。

$('<div>〇〇</div>').insertBefore('.hoge');

See the Pen 【jQuery】要素を追加するメソッドまとめ⑧ by 石森裕也 (@yuyaphotograph) on CodePen.

まとめ

以上、jQueryで指定した要素の直後や直前になんらかのコンテンツを追加するメソッドをまとめて紹介しました。

Web制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！