jQueryでhtmlタグを挿入する方法：html(), before(), after()

jQueryでHTMLタグを挿入する方法を紹介します。

サイトを制作していると、ボタンを押した時に任意のHTMLを挿入したいことなどがしばしばあります。

jQueryでは、以下に挙げる３つの方法でHTMLを挿入することができます。

挿入前のHTML

送信

１．要素を書き換えるhtml()

「html()」メソッドは、セレクトされた要素のHTMLを書き換えるメソッドです。.html()は、引数で与えられた文字列をHTMLとして解釈し、値のセットを行います。

（例）html()

$('#submit').on('click', function(event) {
  $(this).html('送信されました');
});

送信ボタンをクリックすると、buttonタグの中が「送信」から「送信されました」に書き換えられます。

２．要素の前に挿入するbefore(), insertBefore() 

「before()」メソッドは、セレクトされた要素の前に挿入するメソッドです。

以下は、送信ボタンをクリックすると、buttonタグの前に「送信されました」と表示されるようにする例です。

（例）.before()

$('#submit').on('click', function(event) {
  $(this).before('
送信されました
');
});

「insertBefore()」も同じく、セレクトされた要素の前にHTMLを挿入するメソッドですが、構文が異なります。

（例）insertBefore()

$('#submit').on('click', function(event) {
  $('
送信されました
').insertBefore(this);
});

送信ボタンをクリックすると、以下のHTMLになります。

挿入後のHTML

送信されました
送信

３．要素の後に挿入するafter(), insertAfter()

セレクトされた要素の後ろにHTMLを挿入することができます。基本的な文法は、before(), insertBefore()と同様です。

（例）after()

$('#submit').on('click', function(event) {
  $(this).after('
送信されました
');
});

（例）insertAfter()

$('#submit').on('click', function(event) {
  $('
送信されました
').insertAfter(this);
});

送信ボタンをクリックすると以下のHTMLになります。

挿入後のHTML

送信
送信されました