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