jQueryで要素を追加するメソッドまとめ

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

追加する要素の書き方

テキストを追加する場合

テキストを追加する場合はメソッドの後ろの(”)の中に追加したいテキストを記述します。
HTMLタグで囲まれずにテキストだけが反映されるため、追加先の指定には注意が必要です。

$(function() {
  $('.text').click(function(){
    $('.text').before('テキストが追加されました！');
  });
});

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

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

HTMLのタグを追加する場合

HTMLのタグを追加する場合はテキストを入力した箇所にHTMLのタグを入力します。
下記の例では追加されているのがわかりやすくなるようにbuttonタグを追加していますが、<p>や<div>、<li>と書くことで空の要素を追加することができます。

$(function() {
  $('.text').click(function(){
    $('.text').before('<button>');
    //空のpタグを出す場合は$('.text').before('<p>');になります。
  });
});

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

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

また、空のタグだけでなくHTMLのコンテンツとしてテキストや要素一式をまとめて追加することも可能です。

$(function() {
  $('.text').click(function(){
    $('.text').before('<div class="area"><p>要素が<br><span>追加されました！！</span></div>');
  });
});

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

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

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

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

関連記事はこちら

[card url=”https://note.spiqa.design/wp/jquery-change/”]

[card url=”https://note.spiqa.design/wp/jquery-text/”]