jQueryで要素を追加するいくつかの方法〜append,prepend,before,after,wrapなど

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryで要素を追加する方法はいろいろとあります。

子要素の前や後ろに追加したり、自要素の前後に追加、自要素を囲うように追加したりとさまざまです。

要素の追加系メソッドをまとめましたので参考にしてみてください。

 

append() で子要素の最後に追加

子要素の最後に指定要素やテキストを追加します。

複数の要素もカンマ区切りで追加できます。

HTML

jQuery

結果

appendTo() で追加する

要素を移動させる際によく使うappendTo()でも要素の追加は可能です。

jQuery

セレクタに追加する要素を、メソッドに追加箇所を指定するためappend()とは真逆の指定になります。

ただ、複数要素の追加ができなかったり、テキストだけの追加はできないため、あまり使うことはないですね。

prepend() で子要素の先頭に追加

append()とは逆に子要素の先頭に指定要素やテキストを追加します。

複数の要素もカンマ区切りで追加できます。

HTML

jQuery

結果

prependTo() で追加する

要素を移動させる際によく使うprependTo()でも要素の追加は可能です。

jQuery

セレクタには追加する要素を指定し、メソッドには追加箇所を指定するためprepend()とは真逆の指定になります。

ただappendTo()と同様に、複数要素の追加ができなかったり、テキストだけの追加はできないため、あまり使わないです。

before() で自要素の前に追加

自要素の前に指定要素やテキストを追加します。

複数の要素もカンマ区切りで追加できます。

HTML

jQuery

結果

insertBefore() で追加する

要素を移動させる際によく使うinsertBefore()でも要素の追加は可能です。

jQuery

セレクタには追加する要素を指定し、メソッドには追加箇所を指定するためbefore()とは真逆の指定になります。

このメソッドも、複数要素の追加ができなかったり、テキストだけの追加はできないため、ほとんど使いませんです。

after() で自要素の後に追加

自要素の後に指定要素やテキストを追加します。

複数の要素もカンマ区切りで追加できます。

HTML

jQuery

結果

insertAfter() で追加する

要素を移動させる際によく使うinsertAfter()でも要素の追加は可能です。

jQuery

セレクタには追加する要素を指定し、メソッドには追加箇所を指定するためafter()とは真逆の指定になります。

このメソッドも、複数要素の追加ができなかったり、テキストだけの追加はできないため、移動させたいときに使いたいですね。

wrap() で指定要素を個別に囲う

指定要素を別の要素で個別に囲います。

HTML

jQuery

結果

以下のように指定された<p>要素を<div>要素で1つずつ囲いました。

<div class=”wrap”>
<p>p要素です1</p>
</div>
<div class=”wrap”>
<p>p要素です2</p>
</div>

wrapInner() で子要素をまとめて囲う

子要素をまとめて指定の要素で囲います。

HTML

jQuery

結果

以下のように子要素を<div>要素でまとめて囲いました。

<div class=”box”>
<div>
<h1>h1要素です</h1>
<p>p要素です1</p>
<p>p要素です2</p>
</div>
</div>

wrapAll() で自要素+兄弟要素をまとめて囲う

指定要素を別の要素でまとめて囲います。

HTML

jQuery

結果

以下のように複数の<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を操作することによって、要素の値をダイレクトに操作できます。

出典:DOMとは – JavaScript超初心者によるJavaScript入門講座

負荷がかかる例

1回にまとめて負荷を軽減

上記のように、要素をまとめて1つの変数に突っ込んでおき、それを1回だけappendすることで、最小限のDOM操作で抑えることができました。

少ない処理では体感速度は変わりませんが、コーディングの際は意識したいですね。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*