要素の挿入/置き換え/削除

chapter04　要素の挿入/置き換え/削除
注意！　「なに」を「どうする」のどうするのところの逆パターン

ここでの知識として、これまでと違うのは要素の対して何かをする。というのがパターンだったが、ここではチョット違って、要素そのものを追加する。したがって追加する要素が先頭に来ることになり、その場所が後になるこれまでとは逆パターンとなる。

要素挿入のためのさまざまなメソッド　
$('

三輪車

').prependTo('#car');　（id="car"の先頭に挿入）
$('

オートバイ

').appendTo('#car');　（id="car"の末尾に挿入）
$('

ベビーカー

').insertBefore('#car');　（id="car"の直前に挿入、id="car"のある要素の1つ前に挿入）
$('

自動車

').insertAfter('#car'); 　（id="car"の直後に挿入、id="car"のある要素の次に挿入）

今ある要素を別の場所に移動するメソッド
$('#baby').insertAfter('#car'); 　（id="car"の先頭に挿入）

要素を挿入するもうひとつの方法（こちらのパターンがスクリプトとして読みやすい）
上のメソッドと違うのは、オブジェクトと引数の関係が逆転している。
$('#car').prepend('

三輪車

');　（id="car"の先頭に挿入）
$('#car').append('

オートバイ

');　（id="car"の末尾に挿入）
$('#car').before('

ベビーカー

');　（id="car"の直前に挿入、id="car"のある要素の1つ前に挿入）
$('#car').after('

自動車

');　（id="car"の直後に挿入、id="car"のある要素の次に挿入）

$('p').wrap('

');　（p要素を

で囲む）
$('p').wrapAll('

');　（指定されたp要素全てをまとめて1つの

で囲む）
$('p').wrapInner('

');　（このインナーは指定されたp要素の中に

を挿入する）
　　　　例：

テキスト

要素を置き換える方法
$('h2').replaceWith('

おすすめ書籍

');　（h2要素を

おすすめ書籍

で置き換える）
上のメソッドと違うのは、オブジェクトと引数の関係が逆転しているが同じ動作をする。
$('

おすすめ書籍

').replaceAll('h2');　（h2要素を

おすすめ書籍

で置き換える）

要素を削除する方法
$('#site').remove();　（id="site"要素を削除する）
$('#site').empty();　（id="site"要素はそのまま残り、中身の文字を削除する）
$('#site').unwrap();　（id="site"要素を包んでいる要素を削除する）

jQuery