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

Tips

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

今更感ありますが、自分用にjQueryで要素の追加・削除といったDOM操作に関するメソッドの動きをさっと確認できる一覧がほしくて作ったのでシェアします。

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

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

1. 追加

.prepend()

.prepend() のイメージ

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

jQuery

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

.prependTo()

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

jQuery

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

.append()

.append() のイメージ

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

jQuery

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

.appendTo()

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

jQuery

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

.before()

.before() のイメージ

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

jQuery

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

.insertBefore()

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

jQuery

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

.after()

.after() のイメージ

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

jQuery

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

.insertAfter()

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

jQuery

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

.wrap()

.wrap() のイメージ

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

jQuery

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

.wrapAll()

.wrapAll() のイメージ

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

jQuery

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

.wrapInner()

.wrapInner() のイメージ

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

jQuery

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

目次へ

2. 複製

.clone()

.clone() のイメージ

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

jQuery

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

目次へ

3. 置換

.replaceWith()

.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()

.unwrap() のイメージ

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

jQuery

$('A').unwrap();

目次へ


簡易的なものではありますが、それぞれの実際の動きは以下で確認できます。

Close the search window,
please press close button or esc key.