.net column
.NET開発者のためのブログメディア

Webサイトの要素

jQueryでの要素追加方法について紹介|jQueryで正しく要素追加しよう!

2021年01月08日

SE
要素を追加できるメソッドにはどんな種類がありますか?

PM
様々な要素のメソッドがありますが、ここでは基本的な5つのメソッドについて紹介していきます。

jQueryでの要素追加方法について


今回は、jQueryでの要素追加方法について説明します。jQueryでは、様々な要素追加メソッドが用意されています。ここでは、
・指定要素の後に追加(append)
・指定要素の前に追加(prepend)
・指定要素の上に追加(before)
・指定要素の下に追加(after)
・指定要素の外に追加(wrap)
について紹介します。

jQueryでの要素追加方法に興味のある方はぜひご覧ください。

指定要素の後に追加(append)

appendメソッドで、指定要素の後に要素を追加できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

text1

text2

  • list1
  • list2

指定要素の前に追加(prepend)

prependメソッドで、指定要素の前に要素を追加できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

text1

text2

  • list1
  • list2

指定要素の上に追加(before)

beforeメソッドで、指定要素の上に要素を追加できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

text1

text2

  • list1
  • list2

指定要素の下に追加(after)

afterメソッドで、指定要素の下に要素を追加できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

text1

text2

  • list1
  • list2

指定要素の外に追加(wrap)

wrapメソッドで、指定要素の外に要素を追加できます(指定要素を囲うように要素を追加できます)。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

SE
この5つ以外にもメソッドがあるのですか?

PM
はい。追加の他に新規作成・変更・削除があります。自身でコードを書いて理解を深めていきましょう。

まとめ

いかがでしたでしょうか。
jQueryでの要素追加方法について説明しました。jQueryでは、様々な要素追加メソッドが用意されています。ここでは以下について紹介しました。

・指定要素の後に追加(append)
・指定要素の前に追加(prepend)
・指定要素の上に追加(before)
・指定要素の下に追加(after)
・指定要素の外に追加(wrap)

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags