jQueryを使ってWebページにHTMLの要素を追加するメソッドを解説

jQueryはHTML/CSSで作られた静的なWebサイトに動きをつけるために利用されます。動きをつけるとはイベントに応じてテキストを書き換えたり、CSSを操作することを言います。jQueryではDOM操作を得意としています。

jQueryではDOM操作を利用して、HTMLの追加をすることができます。例えば、ボタンを押したら、テキストが浮かび出てきたり、リンクを表示させることができます。

本記事ではjQueryを使ってWebページにHTMLの要素を追加するメソッドを紹介します。

jQueryでHTML要素を追加するにはhtmlメソッドを使う

html()で要素を追加する方法

jQueryでHTML要素を追加するにはhtmlメソッドを使います。基本構文は以下の通りです。

$('セレクタ').html('追加したいHTMLコード');

htmlメソッドを使えばセレクタで指定された要素の中にHTMLのコードを追加できます。例えば、p要素の中にリンクを追加することも可能です。コードは以下の通りです。

<p>リンクに変わります</p>

$('p').html('<a href="#">リンク先にとびます</a>');

本コードが実行されるとpタグ内の「リンクに変わります」が「<a href=”リンク先”>リンク先にとびます</a>」に置き換わります。
注目ポイントとしては、もともとpタグ内にあった文字が消えてしまうことです。

htmlメソッドはセレクタで指定された要素の中身を置き換えるものです。つまり、指定された要素の中に別の要素があれば元の要素内のタグやテキストは置き換えられるので注意してください。

htmlメソッドでHTMLの変更も可能

htmlメソッドでは指定した要素の中身を置き換える機能であることを利用して、HTMLの中身を丸ごと変更することができます。例えば、divタグの中にある複数の要素を別のHTMLに書き換えることも可能です。例えば、divタグの中にh1タグとpタグとul,liタグを一つのｐタグに変えるコードを紹介します。

<div>
  <h1>見出し</h1>
  <p> 段落１</p>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>
</div>

$('div').html('<p>段落2</p>');

コードが実行されるとdivタグ内部にあるタグはすべて「<p>段落2</p>」に置き換わります。つまり、実質的なコードは以下のようになります。

<div>
  <p>段落2</p>
</div>

空のタグを用意して、jQueryでhtmlメソッドを使えば追加されるように見えます。しかし、実際は空のタグを置き換えているだけになります。見かけ上は追加されていますが、htmlメソッドは書き換える処理がされるということを覚えておくことをおすすめします。

jQueryでhtmlメソッド以外を用いて追加する方法

append

jQueryでHTMLを追加する方法の1つにappendメソッドがあります。appendメソッドは指定した要素の子要素として追加されます。この際、一番後ろの子要素として追加されます。下のコードを例として解説します。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('ul').append('<li>リスト3</ul>');

ulタグの子要素としてリスト3というliタグを追加します。元々はリスト1、リスト2という子要素があります。上のコードが実行された場合、HTMLは以下のようになります。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

追加したHTMLである「<li>リスト3</li>」はセレクタであるulタグの子要素の最後に追加されています。

prepend

prependはappendと同じく指定した要素の子要素を追加するメソッドです。appendとの違いは要素の追加される位置です。prependは子要素の一番最初に追加されます。下のコード例をもとにprependメソッドを解説します。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('ul').prepend('<li>リスト3</ul>');

jQueryのコードを実行するとulの子要素の一番最初に「<li>リスト3</li>」が追加されます。そのため、コードは形式上以下のようになります。

<ul>
  <li>リスト3</li>
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

prependはappendと比較すると使う頻度は低いと思います。しかし、覚えておいて損はありません。

after

afterは指定した要素の後ろに追加されるメソッドです。指定した要素の兄弟要素として追加されるので、prepend、appendとは追加のされ方が異なります。コード例を以下に紹介します、

<h1>見出し</h1>
<p>段落1</p>

$('p').after('<p>段落２</p>');

以上のコードでは段落1の下に段落2が追加されます。兄弟要素として追加されるのでHTMLのコードとしては下のようになります。

<h1>見出し</h1>
<p>段落1</p>
<p>段落2</p>

送信ボタンを押した後の確認の表示や必要な情報を追加で表示させたいときなど、並列で要素を追加したいときにおすすめのメソッドです。

before

beforeはafterとは反対に前に要素を追加するためのメソッドです。beforeも兄弟要素として追加されます。使い方はafterとほとんど同じです。下のコードを例に説明します。

<p class="first">段落１</p>
<p class="second">段落2</p>

$('.first').before('<h2>見出し</h2>');

firstクラスの前に見出しが追加されます。よって、コードは以下のようになります。

<h2>見出し</h2>
<p class="first">段落１</p>
<p class="second">段落2</p>

注意点として上のコードの場合、jQueryのセレクタをクラス名でなく、pタグにすると、段落１と段落２の両方の前に追加されることになります。つまり、以下のようなコードとなります。

<h2>見出し</h2>
<p class="first">段落１</p>
<h2>見出し</h2>
<p class="second">段落2</p>

セレクタで指定されたすべての要素の前に追加されるので、タグではなく、class名やid名で指定することをおすすめします。すべての前に追加したいケースも考えられますので、設計段階で機能をどうするかを考えて利用するのがいいと思います。

jQueryでHTML要素を削除する

jQueryでHTML要素を削除するにはremoveメソッドを使います。基本構文は以下の通りです。

$('セレクタ').remove();

セレクタには削除したHTMLの要素を入れます。注意点としては、セレクタとなった要素が子要素を持っていた場合、子要素ごと消えてしまいます。以下のコードを用いて解説します。

<div class="remove">
  <button>削除</button>
  <p>削除されます</p>
</div>

<div class="not-remove">
  <p>ここは残ります</p>
</div>

上記のHTMLでbuttonを押すと、removeクラスを削除するコードは以下の通りです。

$('button').on('click', function () {
  $('.remove').remove();
});

この場合、removeクラスのdivタグだけでなく、子要素であるbuttonタグとpタグも削除されます。そして、残るのはnot-removeクラスだけになります。よって、コードは以下の通りになります。

<div class="not-remove">
  <p>ここは残ります</p>
</div>

まとめ

jQueryでは様々な方法でHTML要素を追加することができます。種類がたくさんあるため、あなたの求める機能に応じて使い分けるようにすることをおすすめします。また、追加されたテキストにもCSSは作用するので、追加後のレイアウトを確認することを忘れないように確認することがおすすめです。

HTMLを追加する機能の需要が伸びてきています。理由は、昨今ではスマホの普及により、画面上にできる限り不要な情報を排除する傾向があるからです。そして、必要な情報はユーザーのクリックによって表示させる機能が増えています。よって、HTMLの追加は重要な役割を持っています。

今後のWeb制作をする上で必要なスキルなので、追加方法を覚えておくことをおすすめします。