【jQuery】要素を追加・削除・置換するメソッドまとめ

今回は、jQueryで個人的によく使用する要素を追加・削除・置換するメソッドのまとめです。

要素内への追加

appendメソッド

appendメソッドでは、オブジェクトで指定した要素内の最後に、引数に指定したコンテンツを追加します。

使用例

<div class='items'></div>内の最後に、p要素のコンテンツを追加する場合

$('div.items').append('<p>追加しました。</p>');

prependメソッド

prependメソッドは、オブジェクトで指定した要素内の先頭に、引数に指定したコンテンツを追加します。

また、引数に関数を指定することも可能で、 関数が受け取る引数(index番号)により追加するコンテンツを変更できます。

使用例

<div class='items'></div>内の先頭に、p要素のコンテンツを追加する場合

$('div.items').prepend('<p>追加しました。</p>');

メソッドの引数について

また、append、prependメソッドでは、引数に関数を指定することも可能で、 関数が受け取る引数(index番号)により追加するコンテンツを変更できます。

要素の前後への追加

afterメソッド

afterメソッドは、オブジェクトで指定した要素の直後に、コンテンツを追加します。

使用例

<div class='items'></div>の直後に、p要素のコンテンツを追加する場合

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

beforeメソッド

beforeメソッドは、オブジェクトで指定した要素の直前に、コンテンツを追加します。

使用例

<div class='items'></div>の直前に、p要素のコンテンツを追加する場合

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

メソッドの引数について

また、after、beforeメソッドでは、引数に関数を指定することも可能で、 関数が受け取る引数(index番号)により追加するコンテンツを変更できます。

要素の削除

removeメソッド

removeメソッドは、オブジェクトで指定した要素を削除します。また、指定した要素の子孫要素も削除されます。

なお、引数にセレクタを指定することで、削除する対象を絞ることもできます。

使用例

<div class='items'></div>を削除する場合。

$('div.items').remove();

emptyメソッド

emptyメソッドは、オブジェクトで指定した要素内を削除します。また、オブジェクトで指定した要素自体は削除されません。

使用例

<div class='items'></div>内を削除をする場合。<div class='items'></div>自体は削除されません。

$('div.items').empty();

detachメソッド

detachメソッドは、オブジェクトで指定した要素を削除します。また、removeメソッドとは異なり、要素を削除してもイベントやハンドラを保持しています。

なお、引数にセレクタを指定することで、削除する対象を絞ることもできます。

使用例

<div class='items'></div>を削除し、要素の削除後もイベントやハンドラは保持する場合。

$('div.items').detach();

要素の置換

replaceWithメソッド

replaceWithメソッドは、オブジェクトで指定した要素を、引数で指定したhtmlコンテンツに置換します。

また、引数に関数を指定することも可能で、 関数が受け取る引数(index番号)により追加するコンテンツを変更できます。

使用例

<div class='items'></div>を、p要素のhtmlコンテンツを置換する場合

$('div.items').replaceWith('<p>置換しました。</p>');

まとめ

以上が、jQueryで個人的によく使用する要素を追加・削除・置換するメソッドのまとめとなります。今回紹介したメソッドの詳細や、要素を操作するその他メソッドについては、以下の参考サイトを確認してみてください。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。