DOMを操作して要素の挿入や移動をするいろいろ

要素を挿入したり移動したりのDOM操作のいろいろをちょっとまとめてみました。

挿入系

before() 指定した要素の前に挿入する。
$(‘挿入先’).before(‘挿入する要素’);
after() 指定した要素の後に挿入する。
$(‘挿入先’).after(‘挿入する要素’);
prepend() 指定した要素内部の先頭に挿入する。
$(‘挿入先’).prepend(‘挿入する要素’);
append() 指定した要素内部の最後に挿入する。
$(‘挿入先’).append(‘挿入する要素’);

JavaScript

$(function() {
	$('ol#before').before('<p>前に挿入</p>');
	$('ol#after').after('<p>後に挿入</p>');
	$('ol#prepend').prepend('<li>0番目</li>');
	$('ol#append').append('<li>4番目</li>');
});

‘挿入する要素’の部分は以下のように$(”)の形でも記述できるようです。
この場合、要素の挿入ではなく別個所からの移動になります。

$(function() {
	$('ol#before').before($('#sample1'));
	$('ol#after').after($('#sample2'));
	$('ol#prepend').prepend($('#sample3'));
	$('ol#append').append($('#sample4'));
});

挿入系のデモページ
 

移動系

insertBefore() 指定した要素の前に移動する。
$(‘移動する要素’).insertBefore(‘挿入先’);
insertAfter() 指定した要素の後に移動する。
$(‘移動する要素’).insertAfter(‘挿入先’);
prependTo() 指定した要素内部の先頭に移動する。
$(‘移動する要素’).prependTo(‘挿入先’);
appendTo() 指定した要素内部の最後に移動する。
$(‘移動する要素’).appendTo(‘挿入先’);

JavaScript

$(function() {
	$('ol#insertBefore li:first-child').insertBefore('ol#insertBefore');
	$('ol#insertAfter li:first-child').insertAfter('ol#insertAfter');
	$('ol#prependTo li:last-child').prependTo('ol#prependTo');
	$('ol#appendTo li:first-child').appendTo('ol#appendTo');
});

‘挿入先’の部分は以下のように$(”)の形でも記述できるようです。

$(function() {
	$('ol#insertBefore li:first-child').insertBefore($('ol#insertBefore'));
	$('ol#insertAfter li:first-child').insertAfter($('ol#insertAfter'));
	$('ol#prependTo li:last-child').prependTo($('ol#prependTo'));
	$('ol#appendTo li:first-child').appendTo($('ol#appendTo'));
});

移動系のデモページ
 

書き換え系

text() 指定した要素内のテキストを変更する。
$(‘変更する要素’).text(‘変更後の内容’);
html() 指定した要素内のhtmlを含むテキストを変更する。
$(‘変更する要素’).html(‘変更後の内容’);
replaceWith() 指定した要素を置き換える。
$(‘変更する要素’).replaceWith(‘置換後の内容’);
replaceAll() 指定した要素を置き換える。
$(‘置換後の内容’).replaceAll(‘変更する要素’);

JavaScript

$(function() {
	$('div#text div').text('<p>変更後の内容</p>');
	$('div#html div').html('<p>変更後の内容</p>');
	$('div#replaceWith div').replaceWith('<p>変更後の内容</p>');
	$('<p>変更後の内容</p>').replaceAll('div#replaceAll div');
});

書き換え系のデモページ
 

wrap系

wrap() 対象要素を指定したHTMLで包む。要素が複数ある場合は、それぞれを包む。
$(‘対象要素’).wrap(‘外包するHTML’);
wrapAll() 対象要素を指定したHTMLで包む。要素が複数ある場合は、それらをまとめて包む。
対象要素以外が含まれる場合、外包の外側に出される。
$(‘対象要素’).wrapAll(‘外包するHTML’);
wrapInner() 対象要素の中身を指定したHTMLで包む。
$(‘対象要素’).wrapInner(‘外包するHTML’);

JavaScript

$(function() {
	$('div#wrap p').wrap('<div></div>');
	$('div#wrapAll p').wrapAll('<div></div>');
	$('div#wrapInner').wrapInner('<div></div>');
});

内包・外包系のデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

  1. […] や追加などのメソッドは以下のページにまとまっています。 DOMを操作して要素の挿入や移動をするいろいろ […]

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31