jQuery｢after｣で要素の直後にHTMLを挿入する

2020年4月9日

あわせて読みたい記事

現役プロが比較 ｢WEBデザインスクール12校｣おすすめランキング！

WEBデザインスクール選びで絶対失敗したくない！プロの目線でおすすめを教えて！

jQueryのメソッド「.after()」は、指定要素の「直後」にHTMLを挿入できるメソッド。

今回は、jQueryで「指定要素の直後にHTMLを挿入できる」メソッド「.after()」について、その使い方をサンプルを交えて解説しよう。

.after()の構文

$("p").after("<span>HTMLを挿入</span>");のように記述し、パラメータに任意のhtmlを入れる事で、指定したhtmlを「指定要素の直後に挿入」する事ができる。

jQueryで.after()を使って、指定要素の直後にHTMLを挿入する例

$(function(){
 $("div p").after("<div>HTMLを挿入</div>");
});

<div>
 <p>html挿入前</p>
</div>

↓↓↓

<div>
 <p>html挿入前</p><div>HTMLを挿入</div>
</div>

このような形で$("div p")の「要素の直後に」htmlを挿入する事ができた。

以上、jQueryで「指定要素の直後にHTMLを挿入」する方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期 ｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

▶ 現役プロ比較！短期 ｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

jQuery｢.prevUntil() / .nextUntil()｣で前後の兄弟要素を取得する方法

jQuery｢val｣でフォームや要素のvalue値を取得・設定する

jQueryでif文を使った条件分岐の書き方

jQueryの全セレクタのまとめ「完全マスター辞典！」

jQueryの「メソッド一覧」と使い方

jQuery｢.children() / .find()｣で子要素を取得する方法

jQueryの使い方「基本の書き方と考え方」

videoタグの使い方とJavaScriptでオリジナルコントローラーを自作する方法

jQuery｢insertBefore｣でHTMLを「指定要素の直前」に移動する

Jqueryでスライドショーの作り方（デザイナーでも出来る自作編）

jQuery｢css()｣でCSSのスタイルを取得・変更する

jQuery｢.prev() / .prevAll()｣で直前の兄弟要素を取得する方法

ナビゲーション

• WEBデザイン
• フリーランス
• Wordpress
• CSS
• プログラミング
• JavaScript
• Photoshop
• ツール / ガジェット

この記事を書いた人

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

新着記事

• YouTubeより詳しく！まとめて学べる『WEBデザイン動画講座』　
• Figmaの背景切り抜きプラグイン『Remove BG』のAPI Key取得方法と使い方
• WEBデザイン動画講座のご紹介【お得な割引アリ】　
• WixでWEBデザイナーが「ポートフォリオサイト」を作ってみた！
• WEBデザインツールの比較！初心者におすすめは？Figma Photoshop Xd Illustrator
• CodeCampGATE(コードキャンプゲート)とは？転職・就職先と評判
• コードキャンプの｢Webデザイン・Webデザイン副業コース｣を卒業生が解説！
• テックアカデミー「はじめての副業コース」卒業生が内容を解説！
• PHPの独学！挫折しないおすすめ勉強方法！
• 16インチMacbook Proで使える100Wモバイルバッテリー Zendure SuperTankレビュー
• [体験談] CodeCamp(コードキャンプ)で挫折する理由！
• テックアカデミー｢受講した感想・評判」学習内容の総まとめ！
• Photoshop 超リアルな商品写真の鏡面反射の作り方
• デイトラの評判は？詳細内容とメリット・デメリットを解説
• CSSだけ超簡単！画像トリミングできる ｢object-fit｣ の使い方
• コードキャンプ ｢無料体験・カウンセリング｣を受講してみた！予約方法や内容の体験談
• デジタルハリウッドSTUDIO by LIGの評判
• PhotoshopでWEBデザインする基本の設定とテクニック
• テックアイエス評判は？現役プロがTECH I.S.を徹底調査！
• WEBデザインの練習・勉強をしながら「お金までもらえる」超おすすめの学習方法！