悩む人jQueryのappendって、なんとなく使ってるけど、実はちゃんと理解できていないかも…
そんな風に感じたことはありませんか？
JavaScriptやjQueryでDOM操作を行う中で、append()は頻出する基本的なメソッドのひとつです。
しかし実際には、append()とappendTo()の違いが曖昧で使い分けに悩んだりすることも少なくありません。
この記事は、jQueryで要素を動的に追加したい初〜中級のフロントエンド開発者やWeb担当者の方に向けて、append()の基礎からappendTo()との違いまで、実例を交えてわかりやすく解説します。
「なんとなく」から「しっかり使い分けられる」状態へ。あなたのjQueryスキルを一段レベルアップさせるために、ぜひ最後までご覧ください。
- append()の基礎知識
- append()の正確な使い方が理解できる
- appendTo()との違いが明確になる
jQueryのappendとは？
append()は非常に頻繁に使われるメソッドです。具体的にどんな役割を果たし、どんな場面で便利なのかを把握しておくと、開発効率がグッと高まります。
ここでは、append()が持つ基本的な機能や使いどころについて、初心者にもわかりやすく解説していきましょう。
append()は、指定した親要素の「最後の子要素」として、新しい内容を追加するためのメソッドです。
親要素の内部に新たなHTML要素やテキストを差し込むことで、動的なコンテンツの生成やUIの変更を手軽に実現できます。
似たようなappendTo()も存在しますが、微妙に挙動が異なるため、基本をしっかり押さえておくことが重要です。
append()の基本的な使い方4つ
append()はシンプルな構文ながら、さまざまな用途に応用できる便利なメソッドです。
ここでは、append()を使った代表的な4つの追加パターンを、具体例を交えて解説します。
1.テキストを追加する
append()で最も基本的な使い方が、テキストの追加です。
HTML要素の中に文字列を動的に追加することで、ユーザーへの通知や説明文の追加ができます。
$(function(){
$('.btn').on('click',function(){
$('#message').append('Hello');
});
});
See the Pen 「attr()メソッド」 マウスオーバーで画像を変更 by kasuga (@kntkfmgf-the-vuer) on CodePen.
このコードは、ボタンクリックでid="message"の要素の末尾に「Hello！」というテキストを追加します。
2.HTMLの要素を追加する
append()では、テキストだけでなくHTML構造そのものを追加することも可能です。これにより、ボタンやリストなどの複雑なUIパーツを動的に追加できます。
$(function(){
$('.btn').on('click',function(){
$('#list').append('<li>追加したリスト</li>');
});
});
See the Pen 「append()メソッド」 テキストを追加する by kasuga (@kntkfmgf-the-vuer) on CodePen.
この例では、ボタンクリックで#listというul要素の最後に、新しいli要素が追加されます。
複数の要素を含むHTMLを追加することもできます。
$(function(){
$('.btn').on('click',function(){
$('.container').append('<div class="box"><p>追加した要素</p></div>');
});
});
3.jQueryオブジェクトを追加(移動)する
append()では、単なる文字列ではなく、jQueryオブジェクトそのものを追加対象にすることも可能です。
$(function(){
$('.btn').on('click',function(){
$('#list1').append($('.move'));
});
});
See the Pen 「append()メソッド」 複数の要素を含むHTMLを追加 by kasuga (@kntkfmgf-the-vuer) on CodePen.
append()は対象要素を「移動」させるため、すでにある要素を対象にした場合は、元の場所からは消えてしまいます。
同じ要素を別の場所にも追加したい場合は、clone()メソッドを併用する必要があります。
4.複数の要素を追加する
append()は、1回の呼び出しで複数の要素を同時に追加することもできます。これは、パフォーマンスや可読性の面でもメリットがあります。
複数要素を追加する場合はカンマで区切ります。
$(function(){
$('.btn').on('click',function(){
$('#list1').append('<li>リスト3</li>', '<li>リスト4</li>');
});
});
See the Pen 「append()メソッド」 jQueryオブジェクトを追加する by kasuga (@kntkfmgf-the-vuer) on CodePen.
または、配列を使って追加することも可能です。
const items = [
$('<li>1つ目</li>'),
$('<li>1つ目</li>')
];
$('#list').append(items);
このように複数の要素を一括で追加すれば、個別にappend()するよりも効率的です。DOMの再描画回数も減るため、パフォーマンス向上にもつながります。
append()の基本操作を把握することで、柔軟なUI構築が可能になります。
次章では、名前が似ていて混乱しやすいappendTo()との違いを見ていきましょう。
似ているappendTo()との違いは？
append()と名前がよく似ているメソッドにappendTo()があります。初心者の方の中には「何が違うの？」と疑問に思う方も多いでしょう。
どちらも要素を追加するという機能を持っていますが、記述方法と操作対象の要素が異なります。ここでしっかり違いを整理しておきましょう。
append() と appendTo() の違い
追加する対象と、追加される要素の立場が逆になるのがappendTo()です。
append()
基本構文
$(親要素).append(子要素);
コード例
$('#list').append('<li>新しいアイテム</li>');
appendTo()
基本構文
$(子要素).appendTo(親要素);
コード例
$('<li>新しいアイテム</li>').appendTo('#list');
このように、書き方は「親.append(子)」か「子.appendTo(親)」かの違いがあります。
どちらを使うべき？
結果だけ見ると同じに見えるため、
かすがどっちでもいんじゃね？と思いませんか？でも実は操作対象が違います！
- append()
→操作対象は親要素。そのため、複数の子要素を1つの親に追加したいときに向いています。 - appendTo()
→操作対象は子要素。そのため、1つの子要素を複数の親候補に条件分岐して追加するような処理に向いています。
また、操作対象としている要素が違うため、チェーンメソッドを利用するとより違いがわかりやすくなります。
以下で例を見ていきましょう。
append() の後にチェーンメソッドで背景色を変更する例
$(function(){
$('.btn').on('click',function(){
$('#list1').append('<li>リスト3</li>').css({'background':'#ccc'});
});
});
See the Pen 「append()メソッド」 append() のチェーンメソッドの例 by kasuga (@kntkfmgf-the-vuer) on CodePen.
結果は親要素のul全体の背景色が変わります。
appendTo() の後にチェーンメソッドで背景色を変更する例
$(function(){
$('.btn').on('click',function(){
$('<li>リスト3</li>').appendTo('#list').css({'background':'#ccc'});
});
});
See the Pen 「append()メソッド」 append() のチェーンメソッドの例 by kasuga (@kntkfmgf-the-vuer) on CodePen.
結果は追加したliのみ背景色が変わります。
append()とappendTo()は同じ結果を生むことが多いですが、それぞれの使いどころを理解しておくことが重要です。
jQueryのappendまとめ
jQueryのappend()は、動的なコンテンツ追加において非常に役立つ基本メソッドです。
この記事では、その使い方から似たメソッドとの比較まで網羅的に解説してきました。ここで、これまでの内容を簡潔に振り返っておきましょう。
append()は、指定した親要素の末尾に要素を追加するメソッド。
| メソッド | 操作対象 | 構文例 |
|---|---|---|
| append() | 親要素。 親要素に子要素を追加する | $(親).append(子) |
| appendTo() | 子要素。 子要素を親要素に追加する | $(子).appendTo(親) |
かすが最後まで読んでいただきありがとうございました！以下のおすすめ記事もチェックして見てくださいね！
まだブログを始めていない方は以下の記事をぜひチェック！
ブログを始めたばかりの人は以下の記事をぜひチェック！
