【jQuery入門】要素の挿入や置き換え、削除を行う

wrap, wrapAll, wrapInnerメソッドを使って、要素を他の要素で包み込む

それぞれの要素を包み込む

wrapメソッドは、指定された要素のそれぞれを別の要素で包み込む

<ul id="car">
  <p>自転車</p>
  <p>バイク</p>
  <p>自動車</p>
</ul>

$(function () {
  $("#car > p").wrap('<li style="border: solid 1px orange"></li>');
});

See the Pen
jQuery7-4 by shinjiezumi (@sezumi)
on CodePen.

すべての要素を包み込む

wrapAllメソッドは、指定された要素すべてをまとめて別の要素で包み込む

もしも異なる要素が間に挟まっている場合には、wrapAllメソッドによって外に追い出される

<ul id="car2">
  <p>自転車</p>
  <p>バイク</p>
  <a href="https://placehold.jp/50x50.png">ほげ</a>
  <p>自動車</p>
</ul>

$(function () {
  $("#car2 > p").wrapAll('<li style="border: solid 1px orange"></li>');
});

See the Pen
jQuery8-1 by shinjiezumi (@sezumi)
on CodePen.

要素配下の内容をそれぞれ包み込む

wrapInnerメソッドは、要素そのものではなく要素の中身を包み込むという点

<ul id="car3">
  <p>自転車</p>
  <p>バイク</p>
  <p>自動車</p>
</ul>

$(function () {
  $("#car3 > p").wrapInner('<li style="border: solid 1px orange"></li>');
});

See the Pen
jQuery8-2 by shinjiezumi (@sezumi)
on CodePen.

replaceWith, replaceAllメソッドを使って、要素を置き換える

現在の要素を別の要素で置き換えるには、replaceWithメソッドを利用する。

replaceWithメソッドの引数にはHTML文字列やjQueryオブジェクトを指定する

replaceAllメソッドはオブジェクトと引数を逆に指定する

<h4 id="hoge">ほげほげ</h4>
<h4 id="fuga">ふがふが</h4>
<ul id="car4">
  <p>自転車</p>
  <p>バイク</p>
  <p>自動車</p>
</ul>

$(function () {
  $("#hoge").replaceWith("<h4>ふがふが</h4>");
  $(' <h4 id="hogehoge">ほげほげ</h4>').replaceAll("#fuga");
});

See the Pen
jQuery8-3 by shinjiezumi (@sezumi)
on CodePen.

remove, empty, unwrapメソッドを使って、要素を削除する

現在の要素を削除する

removeメソッドは、今ある要素を削除できる

<ul id="car5">
  <p>自転車</p>
  <p>バイク</p>
  <p>自動車</p>
</ul>
<div id="hogehoge2">ほげ</div>

$(function () {
  $("#hogehoge2").remove();
});

See the Pen
jQuery8-4 by shinjiezumi (@sezumi)
on CodePen.

現在の要素の中身を削除する

emptyメソッドは現在の要素ではなく、その中身を破棄する

要素そのもののスタイルが残り、中身だけが破棄されていることがわかる

<ul id="car6">
  <p>自転車</p>
  <p>バイク</p>
  <p>自動車</p>
</ul>
<div id="hogehoge3">ほげ</div>

$(function () {
  $("#hogehoge3").empty();
});

See the Pen
jQuery8-5 by shinjiezumi (@sezumi)
on CodePen.

現在の要素を包んでいる要素を削除する

自分を包んでいる要素を削除する場合は、unwrapメソッドを利用する

要素そのもののスタイルが残り、中身だけが破棄されていることがわかる

<ul id="car7">
  <li>
    <p>自転車</p>
  </li>
  <li>
    <p>バイク</p>
  </li>
  <div>
    <p>自動車</p>
  </div>
</ul>

$(function () {
  $("#car7 p").unwrap();
});

See the Pen
jQuery8-6 by shinjiezumi (@sezumi)
on CodePen.