【jQuery入門】要素を追加してみよう!

jQueryでは要素を追加することができます。

before、afterメソッド

例えば下記にli要素の「０」と「１」の間に新たにli要素を追加したい場合はbeforeメソッドやafterメソッドを使って追加することができます。

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

 beforeの場合

<script>
　$(function(){
　　var li = $('<li>').text('just added');
　　$('ul > li:eq(1)').before(li);
　});
</script>

 afterの場合

<script>
　$(function(){
　　var li = $('<li>').text('just added');
　　$('ul > li:eq(0)').after(li);
　});
</script>

 insertBefore/insertAfterメソッド

beforeメソッド/afterメソッドですが、insertBefore/insertAfterメソッドで別の書き方で表現することができます。

 insertBefore

$(function(){
　var li = $('<li>').text('just added');
　li.insertBefore($('ul > li:eq(1)'));
}); 

 insertAfter

$(function(){
　var li = $('<li>').text('just added');
　li.insertAfter($('ul > li:eq(0)'));
});  

※insertBefore/insertAfterのBとAはどちらも大文字です。小文字だとエラーになりますので注意してください。

 prepend/appendメソッド

prependメソッドはある要素の子要素の先頭に追加する、appendメソッドはある要素の子要素の末尾に追加するというものになります。

prepend

$(function(){
　var li = $('<li>').text('just added');
　$('ul').prepend(li);
　});

append

$(function(){
var li = $('<li>').text('just added');
$('ul').append(li);
});

prependTo/appendToメソッド

prepend/appendメソッドですが、prependTo/appendToメソッドで別の書き方で表現することができます。

prependTo

$(function(){
var li = $('<li>').text('just added');
li.prependTo($('ul'))
});

appendTo

$(function(){
var li = $('<li>').text('just added');
li.appendTo($('ul'))
});

※prependTo/appendToのTは大文字です。小文字だとエラーになりますので注意してください。