要素を挿入したり移動したりの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>');
});
コメントが承認されるまで時間がかかります。