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

こんにちは、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には要素を追加するメソッドが複数あります。それぞれの用途を理解して適切なメソッドを選んでいただければと思います。