jQueryで要素を追加する方法はいろいろとあります。
子要素の前や後ろに追加したり、自要素の前後に追加、自要素を囲うように追加したりとさまざまです。
要素の追加系メソッドをまとめましたので参考にしてみてください。
目次
append() で子要素の最後に追加
子要素の最後に指定要素やテキストを追加します。
複数の要素もカンマ区切りで追加できます。
HTML
|
1 2 3 4 5 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // divの子要素の最後に追加 $('div').append('<p class="add">子要素pの後ろに追加しました。</p>'); }); |
結果
|
1 2 3 4 5 6 7 8 9 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> <!--子要素の最後に追加された--> <p class="add">子要素の後ろに追加しました。</p> </div> |
appendTo() で追加する
要素を移動させる際によく使うappendTo()でも要素の追加は可能です。
jQuery
|
1 2 3 4 5 6 |
$(function() { // 追加する要素を先に指定 $('<p class="add">子要素の最後に追加しました。</p>').appendTo('div'); }); |
セレクタに追加する要素を、メソッドに追加箇所を指定するためappend()とは真逆の指定になります。
ただ、複数要素の追加ができなかったり、テキストだけの追加はできないため、あまり使うことはないですね。
prepend() で子要素の先頭に追加
append()とは逆に子要素の先頭に指定要素やテキストを追加します。
複数の要素もカンマ区切りで追加できます。
HTML
|
1 2 3 4 5 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // divの子要素の先頭に追加 $('div').prepend('<p class="add">子要素の先頭に追加しました。</p>'); }); |
結果
|
1 2 3 4 5 6 7 8 9 |
<div class="box"> <!--子要素の先頭に追加された--> <p class="add">子要素の先頭に追加しました。</p> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
prependTo() で追加する
要素を移動させる際によく使うprependTo()でも要素の追加は可能です。
jQuery
|
1 2 3 4 5 6 |
$(function() { // 追加する要素を先に指定 $('<p class="add">子要素の先頭に追加しました。</p>').prependTo('div'); }); |
セレクタには追加する要素を指定し、メソッドには追加箇所を指定するためprepend()とは真逆の指定になります。
ただappendTo()と同様に、複数要素の追加ができなかったり、テキストだけの追加はできないため、あまり使わないです。
before() で自要素の前に追加
自要素の前に指定要素やテキストを追加します。
複数の要素もカンマ区切りで追加できます。
HTML
|
1 2 3 4 5 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // 自要素の前に追加 $('div').before('<div class="add">div要素の上に追加しました。</div>'); }); |
結果
|
1 2 3 4 5 6 7 8 |
<!--自要素の前に追加された--> <div class="add">div要素の上に追加しました。</div> <div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
insertBefore() で追加する
要素を移動させる際によく使うinsertBefore()でも要素の追加は可能です。
jQuery
|
1 2 3 4 5 6 |
$(function() { // 追加する要素を先に指定 $('<div class="add">div要素の上に追加しました。</div>').insertBefore('div'); }); |
セレクタには追加する要素を指定し、メソッドには追加箇所を指定するためbefore()とは真逆の指定になります。
このメソッドも、複数要素の追加ができなかったり、テキストだけの追加はできないため、ほとんど使いませんです。
after() で自要素の後に追加
自要素の後に指定要素やテキストを追加します。
複数の要素もカンマ区切りで追加できます。
HTML
|
1 2 3 4 5 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // 自要素の後に追加 $('div').after('<div class="add">div要素の下に追加しました。</div>'); }); |
結果
|
1 2 3 4 5 6 7 8 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> <!--自要素の後に追加された--> <div class="add">div要素の下に追加しました。</div> |
insertAfter() で追加する
要素を移動させる際によく使うinsertAfter()でも要素の追加は可能です。
jQuery
|
1 2 3 4 5 6 |
$(function() { // 追加する要素を先に指定 $('<div class="add">div要素の下に追加しました。</div>').insertAfter('div'); }); |
セレクタには追加する要素を指定し、メソッドには追加箇所を指定するためafter()とは真逆の指定になります。
このメソッドも、複数要素の追加ができなかったり、テキストだけの追加はできないため、移動させたいときに使いたいですね。
wrap() で指定要素を個別に囲う
指定要素を別の要素で個別に囲います。
HTML
|
1 2 3 4 5 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // p要素をdiv要素で1個つずつ囲う $('p').wrap('<div class="wrap"></div>'); }); |
結果
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="box"> <h1>h1要素です</h1> <!--p要素をdiv要素で囲った--> <div class="wrap"> <p>p要素です1</p> </div> <!--p要素をdiv要素で囲った--> <div class="wrap"> <p>p要素です2</p> </div> </div> |
以下のように指定された<p>要素を<div>要素で1つずつ囲いました。
<div class=”wrap”>
<p>p要素です1</p>
</div>
<div class=”wrap”>
<p>p要素です2</p>
</div>
wrapInner() で子要素をまとめて囲う
子要素をまとめて指定の要素で囲います。
HTML
|
1 2 3 4 5 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // 子要素をdiv要素でまとめて囲う $('div').wrapInner('<div></div>'); }); |
結果
|
1 2 3 4 5 6 7 8 9 10 |
<div class="box"> <!--子要素をまとめてdiv要素で囲った--> <div> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> </div> |
以下のように子要素を<div>要素でまとめて囲いました。
<div class=”box”>
<div>
<h1>h1要素です</h1>
<p>p要素です1</p>
<p>p要素です2</p>
</div>
</div>
wrapAll() で自要素+兄弟要素をまとめて囲う
指定要素を別の要素でまとめて囲います。
HTML
|
1 2 3 4 5 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // 複数のp要素をdiv要素でまとめて囲う $('p').wrapAll('<div class="wrap"></div>'); }); |
結果
|
1 2 3 4 5 6 7 8 9 10 |
<div class="box"> <h1>h1要素です</h1> <!--複数のp要素をdiv要素でまとめて囲った--> <div class="wrap"> <p>p要素です1</p> <p>p要素です2</p> </div> </div> |
以下のように複数の<p>要素を<div>要素でまとめて囲いました。
<div class=”box”>
<h1>h1要素です</h1>
<div class=”wrap”>
<p>p要素です1</p>
<p>p要素です2</p>
</div>
</div>
DOM操作は最小限で
上記で紹介してきたメソッドは、要素をHTMLに直接追加したりといったDOM操作を伴うため、処理が重くなりがちです。
特に複数の要素を追加する際は要素を1つにまとめ、1回で追加するなど、なるべく最小限の処理になるように心がけましょう。
DOMとは
DOM（Document Object Model）とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。
負荷がかかる例
|
1 2 3 4 5 6 7 8 9 |
$(function() { // appendで要素を1個ずつ追加 $('div').append('<p class="add">追加要素1</p>'); $('div').append('<p class="add">追加要素2</p>'); $('div').append('<p class="add">追加要素3</p>'); $('div').append('<p class="add">追加要素4</p>'); }); |
1回にまとめて負荷を軽減
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { // 最初の要素を変数に格納 var html = '<p class="add">追加要素1</p>'; // for文で変数にさらに要素を追加していく for (var i=2; i<=4; i++) { html += '<p class="add">追加要素'+i+'</p>'; } // 4つの要素が詰まった変数をappendする $('div').append(html); }); |
上記のように、要素をまとめて1つの変数に突っ込んでおき、それを1回だけappendすることで、最小限のDOM操作で抑えることができました。
少ない処理では体感速度は変わりませんが、コーディングの際は意識したいですね。
