jQueryのafterで要素を追加する方法【初心者OK】

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…

悩む人

after()って何となく使ってるけど、正しく理解できているか自信がない…

悩む人

insertAfter()との違いがいつもごっちゃになる…

そんなふうに感じたことはありませんか？

この記事は、jQueryを使ってWebページの要素を動的に操作したい初級者の方に向けて、after()メソッドの基礎をわかりやすく解説します。

実際のコード例を交えながら、よく使う3つの使い方や、混同しやすいinsertAfter()との違いまで丁寧に紹介しています。

この記事を読めば、after()の使い方に対するモヤモヤがスッキリ解消し、実務で迷わず使いこなせる自信がきっとつくはずです。

複数の種類がある、jQueryの要素追加メソッドは以下の記事でまとめていますので、ぜひチェックしてみてください。

あわせて読みたい

jQueryの要素を追加するメソッドまとめ【保存版】 jQueryを使って「HTML要素を動的に追加したい」と思ったとき、どのメソッドを使えばいいのか迷った経験はありませんか？ .append() や .prepend()、.before() など、似…

jQueryのafter()とは？

jQueryには、HTMLの要素を簡単に操作できる便利なメソッドが多数存在します。

なかでもafter()は、指定した要素の直後にコンテンツを追加するための関数としてよく利用されます。

指定した要素の中に追加するのではなく、兄弟要素として指定要素の直後に追加される点がポイントです。

このあと、実際の使い方を例とともに紹介しますが、似た名前のメソッドにinsertAfter() というものも存在します。

動作が似ているため混同しやすいのですが、明確な違いがあります。その違いについても、後ほど詳しく解説していきます。

after()の基本的な使い方3つ

「HTML要素を追加」「要素を移動」など、用途によって書き方や挙動が少しずつ変わってくるため、具体例を通じて使い方を覚えるのが近道です。

ここでは、代表的な3つのパターンを紹介していきます。ぜひコードと一緒に確認してみてください。

1.HTMLの要素を追加する

HTMLタグを含む文字列を追加したい場合は、HTML要素の文字列として渡すことで追加することができます。

HTML

<div id="text-area">こんにちは！</div>

jQuery

$(function(){
  $('.btn').on('click',function(){
    $('#text-area').after('<p>ようこそ！</p>');
  });
});

結果

<div id="text-area">ようこそ！</div>
<p>ようこそ！</p>

See the Pen 「after()メソッド」 HTMLの要素を追加する by kasuga (@kntkfmgf-the-vuer) on CodePen.

2.jQueryオブジェクトを追加(移動)する

after()では、すでに存在している要素を移動することも可能です。

HTML

<p class="move-text">ようこそ！</p>
<div id="text-area">こんにちは！</div>

jQuery

$(function(){
  var txt = $('.move-text');
  $('.btn').on('click',function(){
    $('#text-area').after(txt);
  });
});

結果

<div id="text-area">こんにちは！</div>
<p class="move-text">ようこそ！</p>

3.複数の要素を追加する

さらに柔軟な使い方として、複数の要素を一度に追加することも可能です。文字列やHTML、jQueryオブジェクトをカンマ区切りで並べることで、順番に挿入されます。

HTML

<div id="title">タイトル</div>

jQuery

$(function(){
  $('.btn').on('click',function(){
    $('#title').after('<p>テキスト1</p>', '<p>テキスト2</p>');
  });
});

結果

<div id="title">タイトル</div>
<p>テキスト1</p>
<p>テキスト2</p>

似ているinsertAfter()との違いは？

jQueryを使っていると、after()とよく似た名前のメソッドinsertAfter()があります。

どちらも要素の直後に何かを追加する、という意味では同じように見えるため、混同しやすいポイントです。

ここでは、after()とinsertAfter()の違いをわかりやすく解説し、混乱しがちな点を整理していきます。

after() と insertAfter() の違い

after()とinsertAfter()は、どちらも指定した要素の後にコンテンツを挿入するという点では同じです。

しかし、「どちらを主体に書くか」がポイントになります。

after()の書き方

$(挿入先).after(挿入したいもの);

$('#target').after('<p>#targetの後に追加</p>');

insertAfter()の書き方

$(挿入したいもの).insertAfter(挿入先);

$('<p>#targetの後に追加</p>').insertAfter('#target');

チェーンメソッドにした場合の両者の違い

結果だけ見ると同じに見えるため、

かすが

どっちでもいんじゃね？

と思いませんか？でも操作対象が違うため、チェーンメソッドにすると違いがはっきりわかります。

after()のチェーンメソッドのコード例

$('#title').after('<p>追加テキスト</p>').css({'background':'#ccc'});

See the Pen 「after()メソッド」after()のチェーンメソッドのコード例 by kasuga (@kntkfmgf-the-vuer) on CodePen.

この例の場合、操作対象は$('#title')なので、「タイトル」の背景色が変わります。

insertAfter()のチェーンメソッドのコード例

$('<p>追加テキスト</p>').insertAfter('#title').css({'background':'#ccc'});

See the Pen 「after()メソッド」after()のチェーンメソッドのコード例 by kasuga (@kntkfmgf-the-vuer) on CodePen.

この例の場合、操作対象はpタグなので、「追加テキスト」の背景色が変わります。

WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ

「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。

しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。

一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。

かすが

私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！

スクールで学ぶ5つのメリット

• カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
• 現役のプロから実践的なフィードバックを受けられる
• わからないことをすぐに質問・解決できる環境がある
• 制作課題を通じて、ポートフォリオが作成できる
• 学習仲間や講師とのつながりが、モチベーション維持につながる

スクール選びでチェックすべき5つのポイント

• カリキュラムが現場で必要とされる技術に対応しているか
• 現役デザイナー・エンジニアが講師として在籍しているか
• ポートフォリオ制作のサポートが充実しているか
• 卒業後の就職・転職支援が用意されているか
• オンライン・通学など、自分の生活スタイルに合った受講形式か

遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。

WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…

jQueryのafterまとめ

ここまで、jQueryのafter()メソッドについて、その基本から応用、似たメソッドとの違いまでを詳しく見てきました。

最後に、ポイントを振り返りながら、要点を整理しておきましょう。