【jQuery入門】prepend()の使い方と要素の先頭に追加する方法まとめ！

こんにちは、ライターのマサトです！

今回は、jQueryで特定の要素内に別のHTML要素を追加できる「prepend()」メソッドについて学習していきましょう！

この記事では、

・「prepend()」とは？
・「prepend()」の使い方

という基本的な内容から、

・「prepend()」で追加した要素の削除
・「prepend()」のアニメーション
・「prepend()」の類似メソッド
・Callback関数の設定方法

などの応用的な使い方に関しても解説していきます。

この記事で、「prepend()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！

「prepend()」とは？

それでは、まず最初に「prepend()」メソッドについて基本的な知識から学習をしていきましょう！

「prepend()」メソッドは、指定の要素内に文字列やHTML要素を追加することができるメソッドになります。

例えば、次のようなHTMLがあるとします！

<ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

この例では、リスト要素が配置されているのが分かります。

この時に「li要素」が持つすべてのテキスト「リスト」の先頭に文字列やHTMLを追加したい時に「prepend()」は役に立つわけです。

例えば「リスト」というテキストの前に「サンプル」を挿入して「サンプルリスト」にしたり、リンク要素を追加するなど活用範囲は広いでしょう。

本記事では、「prepend()」の基本的な使い方から応用技まで体系的に学べるように解説していきますので、ぜひ参考にしてみてください！

「prepend()」の使い方

ここからは、prepend()の基本的な使い方を学習していきましょう！

主に、文字列・HTMLの追加方法や削除の方法について学んでいきます。

要素内の先頭に文字列を追加する方法

まずは、「prepend()」を使って「文字列」を追加する方法から見ていきましょう！

一般的な記述方法としては、【 対象要素.prepned( 追加したい文字列 ) 】のように引数へ文字列を設定するだけです。

例えば、次のようなp要素があるとします。

<p>こんにちは！</p>

この例は、単純に「こんにちは！」というテキストが表示されるだけですね。

それでは「prepend()」を使って、任意の文字列を追加してみましょう！

$('p').prepend('太郎さん、');

このようにprepend()の引数へ文字列を設定することで、「太郎さん、こんにちは！」というテキストに変更されるわけです。

ポイントは、必ず対象要素内の先頭に追加されるという点です！

要素内の先頭にHTML要素を追加する方法

次に、文字列ではなく「HTML要素」を追加する方法について見ていきましょう！

HTML要素の場合も同じようにprepend()の引数へ指定するだけなので簡単です。

そこで、次のようなリスト要素を用意してみました！

<ul>
    <li>太郎</li>
    <li>花子</li>
    <li>三郎</li>
</ul>

すべての「li要素」に対して、先頭に「strong要素」を追加してみましょう！

次のサンプル例を見てください！

$('li').prepend('<strong>ユーザー名：</strong>');

実行後のHTML

<ul>
    <li><strong>ユーザー名：</strong>太郎</li>
    <li><strong>ユーザー名：</strong>花子</li>
    <li><strong>ユーザー名：</strong>三郎</li>
</ul>

このように引数へHTMLタグをそのまま文字列として記述することで、対象要素の先頭に追加されるのです。

今回の場合であれば、すべての「li要素」の先頭に「strong要素」が追加されます。

複数の要素を先頭に追加する方法

今度は、複数のHTML要素を一度に追加する方法について見ていきましょう！

実は、「prepend()」の引数には複数の要素を指定できるように設計されています。

つまり、【対象要素.prepend( HTML要素１, HTML要素２, HTML要素３・・・ )】のように繋げていけば良いわけです。

例えば空のdiv要素があるとします。

<div></div>

この中に複数のHTML要素を追加したい場合は、次のように記述することができます！

$('div').prepend('<h1>タイトル</h1>', '<p>サンプルテキスト</p>', '<a href="#">サンプルリンク</a>');

実行後のHTML

<div>
    <h1>タイトル</h1>
    <p>サンプルテキスト</p>
    <a href="#">サンプルリンク</a>
</div>

この例では、「prepend()」の引数に「h1, p, a」の3種類のHTML要素を指定していますね。

実行後のHTMLを見てみると、空のdiv要素内に3種類の要素が追加されていることが確認できます。

「prepend()」で追加した要素の削除

「prepend()」は要素を追加するだけなので、追加した要素を削除するには別のメソッドを利用する必要があります。

一般的にHTML要素の削除でよく使われるメソッドとして「remove()」があります。

例えば、次のようなHTMLがあるとします。

<div>
    <p>こんにちは、太郎さん！</p>
</div>

div要素内に任意のテキストを記述したp要素が配置されています。

このdiv要素を対象にして、prepend()でh1要素を追加したあとにそのまま削除してみましょう！

$('div').prepend('<h1>タイトル</h1>');
$('h1').remove();

この例では「h1要素」をdiv要素内に配置したあとに、remove()メソッドを使ってその要素を削除していますね。

prepend()とremove()はペアでよく使われることがあるので、一緒に合わせて覚えておきましょう！

また、remove()によるHTML要素の削除手法や他のメソッドによる削除方法は次の記事で詳しく解説しているので参考にしてみてください！

「prepend()」のアニメーション

この章では、「prepend()」で追加された要素にアニメーション効果を付与する方法を見ていきましょう。

「animate()」の使い方および実際のサンプル事例について学んでいきます。

「animate()」で要素にアニメーションを追加する方法

まずは、アニメーション効果を付与できる「animate()」メソッドの使い方から見ていきましょう。

「animate()」は、CSSのプロパティやduration(秒数)を指定するだけで簡単にHTML要素をアニメーションさせることが出来ます。

一般的な構文としては次の通りです！

対象要素.animate( CSSプロパティ, duration, easing )

アニメーションさせたい要素を対象にして「animate()」を実行させるのが基本となります。

「CSSプロパティ」はオブジェクト形式で指定するのが特徴的で、「-(ハイフン)」は省略して記述します。

例えば、「font-size」プロパティを指定する場合は「fontSize: 40」のようにキャメルケースで記述するわけです。

「duration」はアニメーションする時間をミリ秒で設定します。

「easing」は、「linear」か「swing」を文字列で指定することで動きを変えることができます。

「prepend()」で追加した要素をアニメーションさせる方法

それでは、「animate()」を活用したアニメーション効果の付け方を見ていきましょう！

まずは次のような空のdiv要素を用意します。

<div></div>

このdiv要素内にp要素を追加して、同時にアニメーション効果を付与するには次のように記述します。

$('div').prepend('<p>サンプルテキスト</p>').animate({fontSize: 40}, 2000);

この例では、div要素に対して「prepend().animate()」のように2つのメソッドをチェーンで繋いで実行しています。

これにより、prepend()で要素を追加したあとにanimate()が実行されるようになるわけです。

animate()の引数には「font-size」が設定されており、durationは2秒に指定しています。

実行結果を見ると、追加されたp要素が2秒間かけて40pxのフォントサイズに変化していくアニメーションになります。

prepend()の類似メソッド

ここからは、prepend()によく似た機能を持っているメソッドについて見ていきましょう！

初心者の方がよく混乱しがちな「append()」「before()」について学んでいきます。

「append()」で要素内の末尾に追加する

まずは、「append()」メソッドについて見ていきましょう！

「append()」は、簡単に言えばprepend()の完全な逆バージョンと言えます。

つまり、対象要素内の先頭ではなく「末尾」に文字列やHTML要素を追加するメソッドになるわけです。

次のサンプル例を見てください！

<body>
    <p>こんにちは、</p>

<script>
    $('p').append('太郎さん<strong>！！</strong>');
</script>
</body>

実行後のHTML

<p>こんにちは、太郎さん<strong>！！</strong></p>

この例では単純なp要素が1つ配置されており、append()を使って文字列・HTML要素を追加しているのが分かります。

「prepend()」と同じように必ず要素内の末尾に追加されるという点を忘れないようにしましょう！

また、append()についてさらに知識を深めたい場合は、次の記事で基本から応用技まで解説しているので参考にしてみてください！

「prependTo()」で要素内の先頭に追加する

次に、「prependTo()」メソッドについて学習しましょう！

基本的に「prepend()」「prependTo()」は同じ用途に使われるメソッドなのですが指定方法が少し異なります。

prependTo()の一般的な記述は、【 $( 追加したい要素 ).prependTo( 対象要素 ) 】のように引数に対象となる要素を指定します。

ちょうどprepend()と記述が逆になっているのが特徴です！

例えば、「prepend() / prependTo()」を使ってp要素を対象にテキストの先頭へHTML要素を追加してみましょう！

$('p').prepend('<strong>サンプル</strong>');

$('<strong>サンプル</strong>').prependTo('p');

この例では、prepend() / prependTo()それぞれでp要素のテキストへHTML要素を追加しています。

それぞれ結果はまったく同じになりますが、ポイントは記述方法がそれぞれ逆になっていることです！

対象要素である「p要素」を先に決めいているのが「prepend()」で、最後に決めているのが「prependTo()」になります。

また、「prependTo()」は文字列だけを追加することができない点も忘れないようにしましょう！

「prepend()」と「before()」の違い

今度は、「before()」メソッドについて見ていきましょう！

「before()」も「prepend()」も対象要素の先頭に文字列やHTML要素を追加するというのは同じです。

しかし「prepend()」は対象要素内の先頭に追加するのに対して「before()」は対象要素よりも先頭に追加されます。

別の言い方をすると、「before()」は対象要素の直前に追加されると言った方が分かりやすいかもしれませんね。

例えば、次のようなHTML要素があるとします。

<div>
     <p>こんにちは</p>
</div>

div要素内に1つのp要素が配置されています。

この「div要素」を対象にして「prepend() / before()」をそれぞれ実行してみましょう！

$('div').prepend('<p>prepend()で追加</p>');

$('div').before('<p>before()で追加</p>');

実行後のHTML

<p>before()で追加</p>
<div>
    <p>prepend()で追加</p>
    <p>こんにちは</p>
</div>

実行後のHTMLに注目してください！

「before()」で追加されたp要素は、div要素よりも先頭に追加されていますよね？（直前に追加）

対して「prepend()」はdiv要素内の先頭に追加されています。

「div要素」を対象にして、中と外で追加の方法が異なるので注意しておきましょう！

Callback関数の設定方法

これまで「prepend()」の引数に文字列やHTML要素を指定してきましたが、実は「Callback関数」を設定することも可能です！

関数の引数として対象要素の「index番号」を取得できるので、複数の要素を一気に処理したい場合に便利です。

例えば、次のようなリスト要素があるとします！

<ul>
    <li>ジュース</li>
    <li>ジュース</li>
    <li>ジュース</li>
</ul>

3つの「ジュース」と記述されたli要素が配置されていますね。

このli要素にジュースの名前を追加してみましょう！

var lists = ['リンゴ', 'バナナ', 'イチゴ', 'メロン'];

$('li').prepend(function( index ) {

    return lists[index];

});

実行後のHTML

<ul>
    <li>リンゴジュース</li>
    <li>バナナジュース</li>
    <li>イチゴジュース</li>
</ul>

この例では、prepend()の引数に関数を設定して配列データをreturnしているのが分かります。

この関数は対象要素を1つずつ処理することができるので、「index」番号を利用することで配列を1つずつ返しているわけです。

最終的に実行後のHTMLのように、ジュースの名前がそれぞれ追加されることになります！

まとめ

今回は、対象要素内に文字列やHTML要素を追加することができる「prepend()」を学習しました！

最後に、もう一度ポイントをおさらいしておきましょう！

・prepend()は文字列・HTML要素を対象要素内の先頭に追加することができる
・追加した要素を削除するには「remove()」を使う
・アニメーションを適用させるには「animate()」を使う
・prepend()の引数にはCallback関数を指定することもできる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！