DOM操作でHTML要素の追加・削除【jQuery】

JavaScript

2022.11.10

jQueryでHTMLの操作をしたい時があります。

そのような場合に必要なのがDOM操作です。

追加・削除等、様々なパターンを紹介していきます。

同じ要素追加のメソッドでも、追加位置に違いがあったりします。それについても把握しておきましょう。

append()：要素の末尾に追加

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

$('ul').append('<li>追加要素</li>');

//変更後のHTML
<ul>
  <li>要素１</li>
  <li>要素2</li>
  <li>要素3</li>
  <li>追加要素</li>
</ul>

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

$("ul").prepend("<li>追加要素</li>");

//変更後のHTML
<ul>
  <li>追加要素</li>
  <li>要素１</li>
  <li>要素2</li>
  <li>要素3</li>
</ul>

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

 $("ul").after("<p>追加要素</p>");

//変更後のHTML
<ul>
  <li>要素１</li>
  <li>要素2</li>
  <li>要素3</li>
</ul>
<p>追加要素<p>

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

 $("ul").after("<p>追加要素</p>");

//変更後のHTML
<p>追加要素<p>
<ul>
  <li>要素１</li>
  <li>要素2</li>
  <li>要素3</li>
</ul>

$("p").wrap("<div>");

//変更前のHTML
<p>テキスト</p>

//変更後のHTML
<div>
  <p>テキスト</p>
</div>

$("p").unwrap();

//変更前のHTML
<div>
  <p>テキスト</p>
</div>

//変更後のHTML
<p>テキスト</p>

See the Pen empty by masahiro nomura (@masahiroview) on CodePen.

 $("ul").empty();

//変更後のHTML：<ul></ul>だけ残る。中身のliが消える
<ul>
</ul>

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

 $("ul").remove();

//変更後のHTMLではulごと消える