jQueryでの要素追加方法について紹介｜jQueryで正しく要素追加しよう！
- システム
エンジニア - 要素を追加できるメソッドにはどんな種類がありますか？
- プロジェクト
マネージャー - 様々な要素のメソッドがありますが、ここでは基本的な5つのメソッドについて紹介していきます。
jQueryでの要素追加方法について
今回は、jQueryでの要素追加方法について説明します。jQueryでは、様々な要素追加メソッドが用意されています。ここでは、
・指定要素の後に追加（append）
・指定要素の前に追加（prepend）
・指定要素の上に追加（before）
・指定要素の下に追加（after）
・指定要素の外に追加（wrap）
について紹介します。
jQueryでの要素追加方法に興味のある方はぜひご覧ください。
指定要素の後に追加（append）
appendメソッドで、指定要素の後に要素を追加できます。HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<p class="p1">text1</p>
<p class="p1">text2</p>
<ul class="ul1">
<li>list1</li>
<li>list2</li>
</ul>
</div>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
|
$(function(){
// p要素の後に要素追加
$('.p1').append(' append string');
// ul要素の後に要素追加
$('.ul1').append('<li>append list</li>');
});
|
実行結果は以下のようになります。
text1
text2
- list1
- list2
指定要素の前に追加（prepend）
prependメソッドで、指定要素の前に要素を追加できます。HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<p class="p2">text1</p>
<p class="p2">text2</p>
<ul class="ul2">
<li>list1</li>
<li>list2</li>
</ul>
</div>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
|
$(function(){
// p要素の前に要素追加
$('.p2').prepend('prepend string ');
// ul要素の前に要素追加
$('.ul2').prepend('<li>prepend list</li>');
});
|
実行結果は以下のようになります。
text1
text2
- list1
- list2
指定要素の上に追加（before）
beforeメソッドで、指定要素の上に要素を追加できます。HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="div3">
<p>text1</p>
<p id="target3">text2</p>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</div>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
|
$(function(){
// id指定でpの上に要素追加
$('#target3').before('id指定でpの上に要素追加');
// divの上に要素追加
$('.div3').before('<div>divの上に要素追加</div>');
});
|
実行結果は以下のようになります。
text2
- list1
- list2
指定要素の下に追加（after）
afterメソッドで、指定要素の下に要素を追加できます。HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="div4">
<p>text1</p>
<p id="target4">text2</p>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</div>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
|
$(function(){
// id指定でpの下に要素追加
$('#target4').after('id指定でpの下に要素追加');
// divの下に要素追加
$('.div4').after('<div>divの下に要素追加</div>');
});
|
実行結果は以下のようになります。
text2
- list1
- list2
指定要素の外に追加（wrap）
wrapメソッドで、指定要素の外に要素を追加できます（指定要素を囲うように要素を追加できます）。HTMLを以下に記載します。
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<p>text1</p>
</div>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
|
$(function(){
// p要素の外に要素を追加
$('p').wrap('<div class="add"></div>');
// p要素のparentのclass属性を取得
let result = $('p').parent().attr("class");
// 結果出力
console.log(result);
});
|
実行結果は以下のようになります。
|
1
|
add
|
- システム
エンジニア - この5つ以外にもメソッドがあるのですか？
- プロジェクト
マネージャー - はい。追加の他に新規作成・変更・削除があります。自身でコードを書いて理解を深めていきましょう。
まとめ
いかがでしたでしょうか。
jQueryでの要素追加方法について説明しました。jQueryでは、様々な要素追加メソッドが用意されています。ここでは以下について紹介しました。
・指定要素の後に追加（append）
・指定要素の前に追加（prepend）
・指定要素の上に追加（before）
・指定要素の下に追加（after）
・指定要素の外に追加（wrap）
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
【jQueryのスクロールイベント】Webページのスクロール位置を取得するプログラム
jQueryには画面をスクロールするとイベントが発生する「スクロールイベント」という要素があります。最近はWebサイトで使われていることが多く、画面をスクロールすると、「トップに戻る」ボタンや画像が表示されるのもスクロー […]
-
jQueryのonの使い方を解説！onを正しく使いこなそう
jQueryのonとは？ jQueryはJavaScriptで利用できる豊富な機能を持つライブラリです。そのjQueryのonメソッドは、ユーザ操作に関連した様々なイベント処理を行えるとても便利な機能です。今回はonメソ […]
-
jQueryでのpropメソッドとは？propメソッドの使用方法を紹介
jQueryでのpropメソッドの使い方とは？ 今回は、jQueryでのpropメソッドの使い方について説明します。propメソッドを使用すれば、HTML要素の属性を取得、変更、追加できます。また、複数要素をまとめて設定 […]
-
jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう
jQueryでのcheckboxのチェック状態（checked）の扱い方について 今回は、jQueryでのcheckboxのチェック状態（checked）の扱い方について説明します。 ここでは、checkboxの ・設定 […]
-
jQueryでremove()を使った要素の削除方法5選！その他の方法も解説
jQueryでのremoveメソッドの使い方とは？ 今回は、jQueryでのremoveメソッドの使い方について説明します。 removeメソッドを使用すると、要素の削除ができます。 ここでは、 ・指定の要素を削除 ・i […]
