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.04.13

    【HTML5】strongタグとWordPressテーマ作成時の注意事項

    HTML5

  • 2021.04.06

    【jQuery】全画面表示のナビゲーションメニューを実装する

    JavaScript

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

おすすめ記事

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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