こんにちは、Ryohei(@ityryohei)です!

jQueryで要素を追加するメソッドのご紹介です。

jQueryでは要素を追加するメソッドが数多く用意されているため、それぞれがどんな処理をするのかひと目でわかるようにまとめてみました。各メソッドの指定方法と、実際の動作を確認するためのデモを用意しています。

append()

appendは指定した要素の末尾に、引数に指定した内容を追加するメソッドです。下記の場合は「ul要素にli要素を追加する」となります。

$('ul').append('<li>追加</li>');

See the Pen append | jQuery by ryoy (@intotheprogram) on CodePen.

appendTo()

appendToはappendメソッドと同様、要素の末尾に追加するメソッドです。下記の場合は「li要素をulに追加する」となります。

$('<li>追加</li>').appendTo('ul');

See the Pen appendTo | jQuery by ryoy (@intotheprogram) on CodePen.

prepend()

prependはセレクタに指定した要素の先頭に、引数に指定した内容を追加するメソッドです。下記の場合は「ul要素にli要素を追加する」となります。

$('ul').prepend('<li>追加</li>');

See the Pen prepend | jQuery by ryoy (@intotheprogram) on CodePen.

prependTo()

prependToはprependメソッドと同様、要素の先頭に追加するメソッドです。下記の場合は「li要素をulに追加する」となります。

$('<li>追加</li>').prependTo('ul');

See the Pen prependTo | jQuery by ryoy (@intotheprogram) on CodePen.

before()

beforeは、要素の前に引数に指定した内容を追加するメソッドです。下記の例では「ul要素の前にp要素を追加する」となります。

$('ul').before('<p>追加</p>');

See the Pen before | jQuerys by ryoy (@intotheprogram) on CodePen.

insertBefore()

insertBeforeは、要素の前に引数に指定した内容を追加するメソッドです。下記の例では「p要素をul要素の前に追加する」となります。

$('<p>追加</p>').insertBefore('ul');

See the Pen insertBefore | jQuery by ryoy (@intotheprogram) on CodePen.

after()

afterは、要素の後ろに引数に指定した内容を追加するメソッドです。下記の例では「ul要素の後ろにp要素を追加する」となります。

$('ul').after('<p>追加</p>');

See the Pen after | jQuery by ryoy (@intotheprogram) on CodePen.

insertAfter()

insertAfterは、要素の後ろに引数に指定した内容を追加するメソッドです。下記の例では「p要素をul要素の後ろに追加する」となります。

$('<p>追加</p>').insertAfter('ul');

See the Pen insertAfter | jQuery by ryoy (@intotheprogram) on CodePen.

wrap()

セレクタに指定した要素を、wrapの引数に指定した内容で囲みます。セレクタに指定した要素が複数存在する場合は、それぞれをwrapの引数に指定した内容で囲みます。

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

See the Pen wrap | jQuery by ryoy (@intotheprogram) on CodePen.

wrapInner()

セレクタに指定した要素の中に、wrapInnerの引数に指定した内容を追加します。

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

See the Pen wrapInner | jQuery by ryoy (@intotheprogram) on CodePen.

wrapAll()

セレクタに指定した要素を、wrapAllの引数に指定した内容で囲みます。セレクタに指定した要素が複数存在する場合は、一纏まりにして囲みます。

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

See the Pen wrapAll | jQuery by ryoy (@intotheprogram) on CodePen.

まとめ

以上、jQueryで要素を追加するメソッドのまとめのご紹介でした!

jQueryには要素を追加するメソッドが複数あります。それぞれの用途を理解して適切なメソッドを選んでいただければと思います。

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。