jQueryで要素を動的に追加したいけど、
悩む人prepend()って何？どう使えばいいの？
そんな疑問を持ったことはありませんか？
jQuery初心者にとってはprepend()やprependTo()など、似たようなメソッドが多くて混乱しがちです。
この記事は、prepend()の基本から実践的な使い方、さらには似ているprependTo()との違いまで、やさしく丁寧に解説しています。
複数の種類がある、jQueryの要素追加メソッドは以下の記事でまとめていますので、ぜひチェックしてみてください。
- prepend()の基礎知識
- prepend()の正確な使い方が理解できる
- prependTo()との違いが明確になる
jQueryのprependとは？
prepend()は、jQueryで指定した要素の内部の先頭に、新しい要素やテキストを追加するためのメソッドです。
すでにある要素の「中の一番最初」に何かを挿入したいときに使用します。
たとえば、Webページ上の特定のコンテンツの先頭に見出しや注釈などを加えたい場合に便利です。
外側に追加するのではなく、内側の最初の位置に差し込まれる点がポイントです。
このあと、実際の使い方を例とともに紹介しますが、似た名前のメソッドにprependTo()というものも存在します。
動作が似ているため混同しやすいのですが、明確な違いがあります。その違いについても、後ほど詳しく解説していきます。
prepend()の基本的な使い方4つ
prepend()の基本的な考え方がわかったところで、次は実際にどのような場面で使えるのかを具体的に見ていきましょう。
ここでは、よく使われる4つのパターンを厳選して紹介します。
初心者の方でも理解しやすいよう、サンプルコードと一緒に解説していきますので、自分の目的に合った使い方をイメージしながら読み進めてみてください。
1.テキストを追加する
もっともシンプルな使い方が、要素の中にテキスト文字列を追加するパターンです。
HTML要素の先頭に、純粋なテキストを挿入したいときに使います。
HTML
<div id="text-area">こんにちは！</div>
jQuery
$(function(){
$('.btn').on('click',function(){
$('#text-area').prepend('ようこそ！');
});
});
結果
<div id="text-area">ようこそ！こんにちは！</div>
See the Pen 「prepend()メソッド」 テキストを追加する by kasuga (@kntkfmgf-the-vuer) on CodePen.
このコードは、ボタンクリックでid="text-area"の要素の先頭に「ようこそ！」というテキストを追加します。
2.HTMLの要素を追加する
テキストだけでなく、HTMLタグを含む要素を先頭に追加することも可能です。レイアウトやデザインの都合で、動的に見出しや画像、リンクなどを挿入したいときに役立ちます。
HTML
<div id="content">
<p>記事本文がここに表示されます。</p>
</div>
jQuery
$(function(){
$('.btn').on('click',function(){
$('#content').prepend('<h2>最新記事</h2>');
});
});
結果
<div id="content">
<h2>最新記事</h2>
<p>記事本文がここに表示されます。</p>
</div>
See the Pen 「prepend()メソッド」 HTMLの要素を追加する by kasuga (@kntkfmgf-the-vuer) on CodePen.
この例では、ボタンクリックでid="content"の中の子要素の先頭に指定したHTMLが追加されます。
3.jQueryオブジェクトを追加(移動)する
prepend()には、すでにページ上に存在する要素を移動させる用途もあります。
これは、追加したい内容をjQueryオブジェクトとして取得し、それを他の要素の先頭に移動するケースです。
HTML
<div id="box">
<p>テキスト</p>
</div>
<p class="move-text">このテキストを先頭に追加（移動）する</p>
jQuery
$(function(){
$('.btn').on('click',function(){
$('#box').prepend($('.move-text'));
});
});
結果
<div id="box">
<p class="move-text">このテキストを先頭に追加（移動）する</p>
<p>テキスト</p>
</div>
See the Pen 「prepend()メソッド」 jQueryオブジェクトを追加する by kasuga (@kntkfmgf-the-vuer) on CodePen.
この例では、ボタンクリックでclass="move-text"をid="box"の中の子要素の先頭に追加（移動）します。
prepend()は対象要素を「移動」させるため、すでにある要素を対象にした場合は、元の場所からは消えてしまいます。
同じ要素を別の場所にも追加したい場合は、clone()メソッドを併用する必要があります。
4.複数の要素を追加する
prepend()は、複数のHTML要素をまとめて先頭に追加することも可能です。
複数要素を追加する場合はカンマで区切ります。
HTML
<ul id="list1">
<li>リスト1</li>
<li>リスト2</li>
</ul>
jQuery
$(function(){
$('.btn').on('click',function(){
$('#list1').prepend('<li>追加リスト1</li>', '<li>追加リスト2</li>');
});
});
結果
<ul id="list1">
<li>追加リスト1</li>
<li>追加リスト2</li>
<li>リスト1</li>
<li>リスト2</li>
</ul>
See the Pen 「prepend()メソッド」 複数の要素を追加する by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように複数の要素を一括で追加すれば、個別にprepend()するよりも効率的です。
似ているprependTo()との違いは？
ここでは、名前も動作も非常に似ている prepend() と prependTo() の明確な違いを解説したうえで、どちらを使うのが適切かについても、わかりやすく案内いたします。
初心者が混乱しやすいポイントなので、実際のコード比較も交えて整理しています。
prepend() と prependTo() の違い
prepend()とprependTo()は、どちらも指定した要素の先頭にコンテンツを挿入するという点では同じです。
しかし、「どちらを主体に書くか」がポイントになります。
prepend()の書き方
基本構文
$(挿入先).prepend(挿入したいもの);
コード例
$('#target').prepend('<p>先頭に追加</p>');
prependTo()の書き方
基本構文
$(挿入したいもの).prependTo(挿入先);
コード例
$('<p>先頭に追加</p>').prependTo('#target');
どちらを使うべき？
結果だけ見ると同じに見えるため、
かすがどっちでもいんじゃね？と思いませんか？でも操作対象が違います！
- prepend()
→操作対象は挿入先の親要素。そのため、複数の子要素を1つの親に追加したいときに向いています。 - prependTo()
→操作対象は挿入される子要素。そのため、1つの子要素を複数の親候補に条件分岐して追加するような処理に向いています。
操作対象としている要素が違うため、チェーンメソッドを利用するとより違いがわかりやすくなります。
以下で例を見ていきましょう。
prepend() の後にチェーンメソッドで背景色を変更する例
HTML
<ul id="list">
<li>リスト1</li>
<li>リスト2</li>
</ul>
jQuery
$(function(){
$('.btn').on('click',function(){
$('#list').prepend('<li>追加したリスト</li>').css({'background':'#ccc'});
});
});
See the Pen 「prepend()メソッド」 prepend() のチェーンメソッドの例 by kasuga (@kntkfmgf-the-vuer) on CodePen.
結果は親要素のul全体の背景色が変わります。
prependTo() の後にチェーンメソッドで背景色を変更する例
HTML
<ul id="list">
<li>リスト1</li>
<li>リスト2</li>
</ul>
jQuery
$(function(){
$('.btn').on('click',function(){
$('#list').prepend('<li>追加したリスト</li>').css({'background':'#ccc'});
});
});
See the Pen 「prepend()メソッド」 prependTo() のチェーンメソッドの例 by kasuga (@kntkfmgf-the-vuer) on CodePen.
結果は追加したliのみ背景色が変わります。
jQueryのprependまとめ
この記事では、jQueryのprepend()について基本的な使い方から、似たメソッドとの違いまで詳しく解説しました。
最後にポイントを整理しておきましょう。
- prepend()は、指定した要素の先頭にコンテンツを追加するためのメソッド
- 追加されるのは「外側」ではなく「内側の最初の位置」
- HTMLタグ・テキスト・既存要素など、さまざまなものを追加可能
基本的な使い方
- テキストを追加する
→ プレーンな文字列を先頭に挿入 - HTMLの要素を追加する
→<h2>や<img>などのタグを使って装飾や構造を動的に追加 - jQueryオブジェクトを追加（移動）する
→ すでに存在する要素を別の要素の先頭へ移動 - 複数の要素を追加する
→ カンマで区切ることで一括挿入も可能
| 比較項目 | prepend() | prependTo() |
|---|---|---|
| 操作の主体 | 挿入先の親要素 | 挿入する側の子要素 |
| 書き方の構造 | $(挿入先).prepend(挿入するもの) | $(挿入するもの).prependTo(挿入先) |
| 処理の結果 | 同じ | 同じ |
かすが最後まで読んでいただきありがとうございました！以下のおすすめ記事もチェックして見てくださいね！
まだブログを始めていない方は以下の記事をぜひチェック！
ブログを始めたばかりの人は以下の記事をぜひチェック！
