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

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

要素内への追加

.append()

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

使用例

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

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

.prepend()

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

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

使用例

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

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

メソッドの引数について

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

要素の前後への追加

.after()

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

使用例

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

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

.before()

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

使用例

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

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

メソッドの引数について

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

要素の削除

.remove()

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

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

使用例

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

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

.empty()

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

使用例

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

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

.detach()

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

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

使用例

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

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

要素の置換

.replaceWith()

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

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

使用例

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

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

 

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

参考サイト、参考書籍

コメントまたはTwitterで返信

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