[jQuery]要素の追加

要素の追加に関するメモ。

使用するメソッド

• before/insertBefore
• after/insertAfter
• prepend/prependTo
• append/appendTo

下記のhtmlを基本として各操作を行う。

<ul>
   <li>1</li>
   <li>2</li>
 </ul>

before/insertBefore

指定した要素の前にコンテンツを追加する。

var li = $('<li>').text('hoge');
$('ul > li:eq(1)').before(li);

実行結果

<ul>
    <li>1</li>
    <li>hoge</li>
    <li>2</li>
</ul>

尚、insertBeforeを使用すると記述順を変えることで同じことが出来る。

li.insertBefore($('ul > li:eq(1)'));

after/insertAfter

指定した要素の後にコンテンツを追加する。

var li = $('<li>').text('hoge');
$('ul > li:eq(1)').after(li);

実行結果

<ul>
    <li>1</li>
    <li>2</li>
    <li>hoge</li>
</ul>

尚、insertAfterを使用すると記述順を変えることで同じことが出来る。

li.insertAfter($('ul > li:eq(1)'));

prepend/prependTo

指定した要素内の先頭にコンテンツを追加する。

var li = $('<li>').text('hoge');
$('ul').prepend(li);

実行結果

<ul>
    <li>hoge</li>
    <li>1</li>
    <li>2</li>
</ul>

尚、prependToを使用すると記述順を変えることで同じことが出来る。

li.prependTo($('ul'));

append/appendTo

指定した要素内の最後にコンテンツを追加する。

var li = $('<li>').text('hoge');
$('ul').append(li);

実行結果

<ul>
    <li>1</li>
    <li>2</li>
    <li>hoge</li>
</ul>

尚、appendToを使用すると記述順を変えることで同じことが出来る。

li.appendTo($('ul'));