【jQuery】要素の11種類の追加方法まとめ

jQueryで要素を追加する方法についてまとめました。11種類の追加方法について、それぞれの挙動の違いを実例を挙げながら解説します。

append()メソッド

append()メソッドは対象の要素内の一番最後にコンテンツを追加するメソッドです。

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

appendTo()メソッドは対象の要素内の一番最後にコンテンツを追加するメソッドです。append()メソッドと同じ結果となりますが、パラメータの渡し方が前後逆となります。

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

prepend()メソッドは対象の要素内の一番最初にコンテンツを追加するメソッドです。

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

prependTo()メソッドは対象の要素内の一番最初にコンテンツを追加するメソッドです。prepend()メソッドと同じ結果となりますが、パラメータの渡し方が前後逆となります。

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

after()メソッドは対象の要素の後にコンテンツを追加するメソッドです。

$('ul').after('<div>追加しました</div>');

insertAfter()メソッドは対象の要素の後にコンテンツを追加するメソッドです。after()メソッドと同じ結果となりますが、パラメータの渡し方が前後逆となります。

$('<div>追加しました</div>').insertAfter('ul');

before()メソッドは対象の要素の前にコンテンツを追加するメソッドです。

$('ul').before('<div>追加しました</div>');

insertBefore()メソッドは対象の要素の前にコンテンツを追加するメソッドです。before()メソッドと同じ結果となりますが、パラメータの渡し方が前後逆となります。

$('<div>追加しました</div>').insertBefore('ul');

wrap()メソッドは対象の要素を指定した要素で囲むメソッドです。

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

wrapAll()メソッドは対象の複数の要素を指定した要素で丸ごと囲むメソッドです。

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

wrapInner()メソッドは対象の要素の子要素を指定した要素で丸ごと囲むメソッドです。

$('div').wrapInner('<div>');

いかがでしたか。それぞれのメソッドの違いについて理解できたかと思います。