トップページ >  jQuery >  DOM要素の追加・削除
初版2011/10/12： 最終更新日2011/10/12
DOM要素の追加・削除
目次
・DOM要素の追加・削除
・内部挿入
・外部挿入
・包囲
・置換
・削除
・複製
DOM要素の追加・削除

要素の追加・削除を、W3Cから勧告されているDOMに関する規格を用いて行おうとすると困難なものがあります。
jQueryを用いると、要素の追加・削除が簡単に行えます。

以下は比較の実装例です。
1

  • 元から存在する項目

リスト1. W3C DOMでの要素追加例

function Sample11(){
	// まず追加する要素を作る
    var li = document.createElement('li');
    // 要素内のテキストを作る
    li.innerHTML = 'DOMにて ' + getNowTime();
    // 追加する親
    var ul = document.getElementById('Sample1');
    // 追加
    ul.appendChild(li);
}

リスト2. jQueryでの要素追加例

function Sample12(){
	jQuery('#Sample1').append(
		'<li>jQueryにて ' + getNowTime() + '</li>'
	);
}

リスト2は、表現上 3行に分けていますが、実質1行で記述することが可能です。

内部挿入

選択した要素内に子要素として追加することが可能です。

append(コンテンツ)
指定した全要素の最後に、コンテンツを追加します。
DOMのappendChildメソッドに似ています。
返り値：jQueryオブジェクト

リスト3. append(コンテンツ)

function Sample23(){
	jQuery('.Sample23 li').append(
		'<ul><li>入れ子 ' + getNowTime() + '</li></ul>'
	);
}

実装例

  • 元から存在する項目
　
appendTo(CSSセレクタ)
指定した全要素を、CSSセレクタに沿った要素の最後に追加します。
要素の移動に便利です。
返り値：jQueryオブジェクト

リスト4. appendTo(CSSセレクタ)

function Sample24(){
	jQuery('.Sample24Org li:first').appendTo('.Sample24');
}

実装例

【追加先】

  • 0

【追加元】

  • 1
  • 2
  • 3
　
prepend(コンテンツ)
指定した全要素の先頭に、コンテンツを追加します。
返り値：jQueryオブジェクト

リスト5. prepend(コンテンツ)

function Sample25(){
	jQuery('.Sample25 li').prepend(
		'<ul><li>入れ子 ' + getNowTime() + '</li></ul>'
	);
}

実装例

  • 元から存在する項目
　
prependTo(CSSセレクタ)
指定した全要素を、CSSセレクタに沿った要素の先頭に追加します。
要素の移動に便利です。
返り値：jQueryオブジェクト

リスト6. prependTo(CSSセレクタ)

function Sample26(){
	jQuery('.Sample26Org li:last').prependTo('.Sample26');
}

実装例

【追加先】

  • 0

【追加元】

  • 1
  • 2
  • 3
外部挿入

選択した要素に兄弟要素として追加することが可能です。

after(コンテンツ)
指定した全要素の直後に、コンテンツを追加します。
返り値：jQueryオブジェクト

リスト7. after(コンテンツ)

function Sample37(){
	jQuery('.Sample37').after(
		'<p>追加 ' + getNowTime() + '</p>'
	);
}

実装例

　
insertAfter(CSSセレクタ)
指定した全要素の直後に、コンテンツを追加します。
順番の入替などに便利です。
返り値：jQueryオブジェクト

リスト8. insertAfter(CSSセレクタ)

function Sample38(){
	jQuery('.Sample38 li:first').insertAfter('.Sample38 li:last');
}

実装例

  1. A
  2. B
  3. C
　
before(コンテンツ)
指定した全要素の直前に、コンテンツを追加します。
返り値：jQueryオブジェクト

リスト9. before(コンテンツ)

function Sample39(){
	jQuery('.Sample39').before(
		'<p>追加 ' + getNowTime() + '</p>'
	);
}

実装例

　
insertBefore(CSSセレクタ)
指定した全要素の直前に、コンテンツを追加します。
順番の入替などに便利です。
返り値：jQueryオブジェクト

リスト10. insertBefore(CSSセレクタ)

function Sample310(){
	jQuery('.Sample310 li:first').insertBefore('.Sample310 li:last');
}

実装例

  1. A
  2. B
  3. C
包囲

選択した要素の親要素として追加することが可能です。

wrap(コンテンツ|jQueryオブジェクト)
指定した全要素をコンテンツまたはjQueryオブジェクトを用いて親要素として包囲します。
返り値：jQueryオブジェクト

リスト11. wrap(コンテンツ|jQueryオブジェクト)

function Sample411(){
	// 「包む対象」だけを包みます。
	var wrp = jQuery('div.Sample411').wrap('<div class="RedWraper"></div>');
	// 「包む対象」を使ってボタンを包みます。
	jQuery('button.Sample411').wrap(wrp);
}

実装例

包む対象
　
wrapAll(コンテンツ|jQueryオブジェクト)
指定した要素群をまとめてコンテンツまたはjQueryオブジェクトを用いて親要素として包囲します。
返り値：jQueryオブジェクト

リスト12. wrapAll(コンテンツ|jQueryオブジェクト)

function Sample412(){
	// 「包む対象-2」「包む対象-3」「包む対象-4」をまとめて包みます。
	var wrp = jQuery('p.Sample412').slice(1,4).wrapAll('<div class="RedWraper"></div>');
}

実装例

包む対象-1

包む対象-2

包む対象-3

包む対象-4

包む対象-5

　
wrapInner(コンテンツ|jQueryオブジェクト)
指定した要素群の内容をコンテンツまたはjQueryオブジェクトを用いて内容の親要素として包囲します。
返り値：jQueryオブジェクト

リスト13. wrapInner(コンテンツ|jQueryオブジェクト)


								
実装例

								
    
									
  • 元から存在する項目
    • 
								

								
							

						

					

				
					
					
置換

					

						

						選択した要素を置換することが可能です。

						

						

							
replaceWith(コンテンツ|jQueryオブジェクト)

							

								指定した全要素をコンテンツまたはjQueryオブジェクトと入替します。

							

							

								返り値：jQueryオブジェクト

							

							

								
リスト14. replaceWith(コンテンツ|jQueryオブジェクト)

								
function Sample514(){
	jQuery('.Sample514 li').replaceWith(
		'<li class="RedWraper">' + getNowTime() + '</li>'
	);
}


								
実装例

								
    
									
  1. 対象-1
    2. 
									
  2. 対象-2
    3. 
									
  3. 対象-3
    4. 
								

								
							

							
　

							
replaceAll(CSSセレクト)

							

								CSSセレクトに沿った全要素を、指定した要素と入替します。

							

							

								返り値：jQueryオブジェクト

							

							

								
リスト15. replaceAll(CSSセレクト)

								
function Sample515(){
	// 置換内容を作る
	var src = jQuery('<li class="RedWraper">' + getNowTime() + '</li>');
	// 偶数箇所を置換
	src.replaceAll('.Sample515 li:odd');
}


								
実装例

								
    
									
  1. 対象-1
    2. 
									
  2. 対象-2
    3. 
									
  3. 対象-3
    4. 
									
  4. 対象-4
    5. 
									
  5. 対象-5
    6. 
								

								
							

						

					

				
					
					
削除

					

						

						選択した要素をまとめて削除することが可能です。

						

						

							
empty()

							

								指定した全要素の内容をまとめて空にします。

							

							

								返り値：jQueryオブジェクト

							

							

								
リスト16. empty()

								
function Sample616(){
	// 奇数箇所のみ空にする
	jQuery('.Sample616 li:even').empty();
}


								
実装例

								
    
									
  1. 対象-1
    2. 
									
  2. 対象-2
    3. 
									
  3. 対象-3
    4. 
									
  4. 対象-4
    5. 
									
  5. 対象-5
    6. 
								

								
							

							
　

							
remove([CSSセレクタ])

							

								指定した全要素を削除します。

								「CSSセレクタ」が指定された場合は、それに沿った要素を削除します。

							

							

								返り値：jQueryオブジェクト

							

							

								
リスト17. remove([CSSセレクタ])

								
function Sample617(){
	// 偶数箇所の最初のみ削除する
	jQuery('.Sample617 li:odd').remove(':first');
}


								
実装例

								
    
									
  1. 対象-1
    2. 
									
  2. 対象-2
    3. 
									
  3. 対象-3
    4. 
									
  4. 対象-4
    5. 
									
  5. 対象-5
    6. 
								

								
							

						

					

				
					
					
複製

					

						

						選択した要素を複製することが可能です。

						

						

							
clone([true])

							

								指定した全要素のコピーを作ります。

								引数がtrueの場合、その要素イベントもコピーします。

							

							

								返り値：jQueryオブジェクト

							

							

								
リスト18. clone([true])

								
function Sample718(){
	// コピー元
	var src = jQuery('.Sample718');
	// イベント込みでコピー
	src.clone(true).insertAfter(src);
}


								
実装例

								
    
									
  1. Clickイベント無し
    2. 
									
  2. Clickイベントあり
    3. 
								

								
							

						

					

					
					

						HOME