HTML5 JavaScript

2021.03.15

【jQuery】jQueryで要素を追加する方法

ボタンを押したら要素を追加したい、WordPressの記事のようなHTMLを直接触ることができないコンテンツにspanタグを追加したいということもあると思います。
そんな時に便利なjQueryを用いて要素を追加する方法(メソッド)をご紹介いたします!

.before() 指定した要素の前に追加する

.before()を使うことで指定した要素の前に要素を追加することができます。
HTMLのタグだけでなく、テキストをそのまま追加することも可能です。

記述方法

See the Pen bGBOrYe by spiqa design (@spiqa_design) on CodePen.

※右下の「Rerun」ボタンを押すとリセットできます。

クリック後のHTML

<div>
  <p>テキストが追加されました!</p>
  <p class="text">ここをクリックすると<br>前に要素が追加されます</p>
</div>

.after() 指定した要素の後に追加する

.after()を使うことで指定した要素の後に要素を追加することができます。
.before()同様にHTMLのタグだけでなく、テキストをそのまま追加することができます。

記述方法

See the Pen PobXJQK by spiqa design (@spiqa_design) on CodePen.

※右下の「Rerun」ボタンを押すとリセットできます。

クリック後のHTML

<div>
  <p class="text">ここをクリックすると<br>前に要素が追加されます</p>
  <p>テキストが追加されました!</p>
</div>

.prepend() 指定した要素の中の先頭に子要素追加する

.prepend()を使うことで指定した要素の中の先頭に子要素を追加することができます。
.before()/.after()同様にHTMLのタグだけでなくテキストを追加することもできます。

先ほどまでの例に背景色と、一番前、一番後ろのテキストを追加して記述方法をご紹介いたします。

記述方法

See the Pen KKNbXeG by spiqa design (@spiqa_design) on CodePen.

※右下の「Rerun」ボタンを押すとリセットできます。

クリック後のHTML

<div class="wrap">
  <p>テキストが追加されました!</p>
  <p>一番前の要素</p>
  <p class="text">ここをクリックすると<br>先頭に要素が追加されます</p>
  <p>一番後ろの要素</p>
</div>

.append() 指定した要素の中の最後に子要素追加する

.append()を使うことで指定した要素の中の一番最後に子要素を追加することができます。
.prepend()同様にHTMLタグだけでなくテキストを追加することもできます。

記述方法

See the Pen oNYOBBX by spiqa design (@spiqa_design) on CodePen.

※右下の「Rerun」ボタンを押すとリセットできます。

クリック後のHTML

<div class="wrap">
  <p>一番前の要素</p>
  <p class="text">ここをクリックすると<br>先頭に要素が追加されます</p>
  <p>一番後ろの要素</p>
  <p>テキストが追加されました!</p>
</div>

.remove() 指定した要素を削除する

追加をするだけでなく、削除をすることも可能です。
下記の例のように.remove()を使うことで指定した要素を削除することができます。

記述方法

See the Pen MWbZOYN by spiqa design (@spiqa_design) on CodePen.

※右下の「Rerun」ボタンを押すとリセットできます。

クリック後のHTML

<div class="wrap">
  <p class="text">ここをクリックすると<br>下のテキストが消えます</p>
</div>

.wrap() 指定した要素を囲む

ここまでは要素を追加する方法をご紹介しましたが、次は要素を囲む方法をご紹介します。
.wrap()を指定すると、指定した要素を囲むタグを追加することができます。

記述方法

See the Pen JjbwOGb by spiqa design (@spiqa_design) on CodePen.

※右下の「Rerun」ボタンを押すとリセットできます。

クリック後のHTML

<div class="wrap">
  <p class="text">ここをクリックすると<br>divタグが追加されます</p></div>

.unwrap() 指定した要素を囲んでいるタグを削除する

.wrap()とは逆の動きで、指定した要素を囲んでいるタグを削除することができます。

記述方法

See the Pen oNYJozw by spiqa design (@spiqa_design) on CodePen.

※右下の「Rerun」ボタンを押すとリセットできます。

クリック後のHTML

<p class="text">ここをクリックすると<br>divタグが消えます</p>


使う機会が少ないメソッドではありますが、知っているとふとした時に役に立つメソッドです!ぜひご活用ください!

関連記事はこちら

0

関連記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    HTML5

  • 2021.06.02

    【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行……

    CSS

    HTML5

おすすめ記事

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!