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

2014.12.13

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

挿入系

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

JavaScript

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

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

1
2
3
4
5
6
$(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

1
2
3
4
5
6
$(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');
});

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

1
2
3
4
5
6
$(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

1
2
3
4
5
6
$(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

1
2
3
4
5
$(function() {
    $('div#wrap p').wrap('<div></div>');
    $('div#wrapAll p').wrapAll('<div></div>');
    $('div#wrapInner').wrapInner('<div></div>');
});

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

参考サイト

関連記事

コメントを残す

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

CAPTCHA


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

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031