要素の追加

JQuery

JQueryで要素を追加する方法を解説します。要素の追加にはいろいろなパターンがありますので、それぞれを使えるようになると便利です。

前に追加

$('div').before('<p>追加する要素</p>');

$('<p>追加する要素</p>').insertBefore('div');

<p>追加する要素</p>
<div>サンプル</div>

指定した要素の前に追加する場合は、before()もしくはinsertBefore()を使います。上記の例ではdivタグの前に「<p>追加する要素</p>」が追加されます。

before()とinsertBefore()は要素を前に追加するのは同じことですが、ソース上の違いがあります。対象の要素と追加する要素が逆になります。メソッドチェーンでさらに操作などを追加したい場合に使い分ければいいかと思います。

$('div').after('<p>追加する要素</p>');

$('<p>追加する要素</p>').insertAfter('div');

<div>サンプル</div>
<p>追加する要素</p>

指定した要素の後ろに追加する場合は、after()もしくはinsertAfter()を使います。上記の例ではdivタグの後ろに「<p>追加する要素</p>」が追加されます。

after()とinsertAfter()の違いはソース上のみで動作は同じです。メソッドチェーンでさらに操作などを追加したい場合に使い分けます。

$('ul').prepend('<li>追加する要素</li>');

$('<li>追加する要素</li>').prependTo('ul');

<ul>
<li>サンプルリスト</li>
<li>サンプルリスト</li>
</ul>

<ul>
<li>追加する要素</li>
<li>サンプルリスト</li>
<li>サンプルリスト</li>
</ul>

指定した要素の内部の先頭に追加する場合は、prepend()もしくはprependTo()を使います。上記の例ではulタグの内部の先頭に「<li>追加する要素</li>」が追加されます。

prepend()とprependTo()の違いはソース上のみで動作は同じです。メソッドチェーンでさらに操作などを追加したい場合に使い分けます。

$('ul').append('<li>追加する要素</li>');

$('<li>追加する要素</li>').appendTo('ul');

<ul>
<li>サンプルリスト</li>
<li>サンプルリスト</li>
</ul>

<ul>
<li>サンプルリスト</li>
<li>サンプルリスト</li>
<li>追加する要素</li>
</ul>

指定した要素の内部の最後に追加する場合は、append()もしくはappendTo()を使います。上記の例ではulタグの内部の最後に「<li>追加する要素</li>」が追加されます。

append()とappendTo()の違いはソース上のみで動作は同じです。メソッドチェーンでさらに操作などを追加したい場合に使い分けます。

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

指定した要素を囲んで追加する場合は、wrap()を使います。上記の例ではpタグを囲んだdivタグが追加されます。対象要素が複数ある場合はそれぞれに囲んだ要素を追加します。

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

指定した要素をすべて囲んで追加する場合は、wrapAll()を使います。上記の例ではpタグをすべて囲んだdivタグが追加されます。wrap()は個別に囲むのに対して、wrapAll()はすべてをまとめて囲んで追加する違いがあります。

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

指定した要素の内部を囲んで追加する場合は、wrapInner()を使います。上記の例ではpタグの内部を囲んだspanタグが追加されます。