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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

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

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

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

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

appendメソッド

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

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

appendToメソッド

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

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

prependメソッド

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

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

prependToメソッド

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

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

afterメソッド

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

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

insertAfterメソッド

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

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

beforeメソッド

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

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

insertBeforeメソッド

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

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

まとめ

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

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

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