jQuery：要素の追加・複製・置換・削除といったDOM操作に関する備忘録 目次

1. 追加
2. 複製
3. 置換
4. 削除

1. 追加

.prepend()

マッチした要素内の先頭に指定した要素を追加します。
以下サンプルコードはイメージのように「Blockの中にXを追加する」というものになり、.prepend()は要素をマッチした要素内の先頭に追加するので、もともとあったAより上にXが追加されます。

jQuery

$('Block').prepend('X');

.prependTo()

基本的な動きは.prepend()と一緒で、わかりやすい違いのひとつが挿入先の要素指定を後で行います。
以下サンプルコードは.prepend()のものと同様で「Blockの中にXを追加する」という動きになります。

jQuery

$('X').prependTo('Block');

.append()

.prepend()とは逆に、マッチした要素内の末尾に指定した要素を追加します。
以下サンプルコードはイメージのように「Blockの中にXを追加する」というものになり、.append()は要素をマッチした要素内の末尾に追加するので、もともとあったAより下にXが追加されます。

jQuery

$('Block').append('X');

.appendTo()

基本的な動きは.append()と一緒で、わかりやすい違いのひとつが挿入先の要素指定を後で行います。
以下サンプルコードは.append()のものと同様で「Blockの中にXを追加する」という動きになります。

jQuery

$('X').appendTo('Block');

.before()

マッチした要素前に指定した要素を追加します。
以下サンプルコードはイメージのように「Blockの前にXを追加する」というものになります。

jQuery

$('Block').before('X');

.insertBefore()

基本的な動きは.before()と一緒で、わかりやすい違いのひとつが挿入先の要素指定を後で行います。
以下サンプルコードは.before()のものと同様で「Blockの前にXを追加する」という動きになります。

jQuery

$('X').insertBefore('Block');

.after()

.before()とは逆に、マッチした要素後に指定した要素を追加します。
以下サンプルコードはイメージのように「Blockの後にXを追加する」というものになります。

jQuery

$('Block').after('X');

.insertAfter()

基本的な動きは.after()と一緒で、わかりやすい違いのひとつが挿入先の要素指定を後で行います。
以下サンプルコードは.after()のものと同様で「Blockの後にXを追加する」という動きになります。

jQuery

$('X').insertAfter('Block');

.wrap()

マッチした要素を指定した要素で括ります。
以下サンプルコードはイメージのように「AとBをそれぞれXで括る」というものになり、AとBはそれぞれp要素、Xはdiv要素だった場合のものです。

jQuery

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

.wrapAll()

基本的には.wrap()と同様にマッチした要素を指定した要素で括りますが、マッチするものが複数ある場合はそれらをまとめて括ります。
例えばイメージのように AとBでそれぞれ要素があり、それがいずれもp要素だった時、以下サンプルコードのように記述することで2つのp要素をX（div）で括ります。

jQuery

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

.wrapInner()

.wrap()と.wrapAll()はいずれもマッチした要素を指定した要素で括るものでしたが、こちらはマッチした要素内を括るというものになります。
以下サンプルコードはイメージのように「Aの内側をXで括る」というものになり、Aはp要素、Xはspan要素だった場合のものです。

jQuery

$('p').wrapInner('<span></span>');

目次へ

2. 複製

.clone()

指定した要素を複製することができ、.clone(true)のように引数にtrueを指定すればイベントハンドラも含めて複製することができます。
以下サンプルコードはイメージのように「Aを複製してBlockに追加する」というものになり、追加の動きは.appendTo()を使用した場合になります。

jQuery

$('A').clone().appendTo('Block');

目次へ

3. 置換

.replaceWith()

マッチした要素を指定した要素に置換します。
以下サンプルコードはイメージのように「AをXに置換する」というものになります。

jQuery

$('A').replaceWith('X');

.replaceAll()

基本的な動きは.replaceWith()と一緒で、わかりやすい違いのひとつが置換後の要素を先に記述します。
以下サンプルコードは.replaceWith()のものと同様で「AをXに置換する」という動きになります。

jQuery

$('X').replaceAll('A');

ちなみに、詳しくは割愛しますが同じように内容を置換するのに頻繁に利用されるものとしては.html()や.text()といったものもあります。

目次へ

4. 削除

.remove()

マッチした要素を子要素も含めすべて削除し、以下サンプルコードは「Aを削除する」という動きになります。
ちなみに要素は削除するけどイベントハンドラを残したいという場合などは、.detach()を使用します。

jQuery

$('A').remove();

.empty()

マッチした要素の子要素を削除します。
例えばAの中にBが入っている要素がある時、以下サンプルコードのように記述することでAはそのまま残り、中に入っていたBは削除されます。

jQuery

$('A').empty();

.unwrap()

マッチした要素の親要素を削除します。
例えばイメージのようにAという要素がXという要素に括られている時、以下サンプルコードのように記述することでAを括っているXが削除されます。

jQuery

$('A').unwrap();

目次へ