jQueryでHTMLタグを挿入する方法を紹介します。
サイトを制作していると、ボタンを押した時に任意のHTMLを挿入したいことなどがしばしばあります。
jQueryでは、以下に挙げる３つの方法でHTMLを挿入することができます。
挿入前のHTML
|
1 |
<button id="submit">送信</button> |
１．要素を書き換えるhtml()
「html()」メソッドは、セレクトされた要素のHTMLを書き換えるメソッドです。.html()は、引数で与えられた文字列をHTMLとして解釈し、値のセットを行います。
（例）html()
|
1 2 3 |
$('#submit').on('click', function(event) { $(this).html('送信されました'); }); |
送信ボタンをクリックすると、buttonタグの中が「送信」から「送信されました」に書き換えられます。
２．要素の前に挿入するbefore(), insertBefore()
「before()」メソッドは、セレクトされた要素の前に挿入するメソッドです。
以下は、送信ボタンをクリックすると、buttonタグの前に「送信されました」と表示されるようにする例です。
（例）.before()
|
1 2 3 |
$('#submit').on('click', function(event) { $(this).before('<p>送信されました</p>'); }); |
「insertBefore()」も同じく、セレクトされた要素の前にHTMLを挿入するメソッドですが、構文が異なります。
（例）insertBefore()
|
1 2 3 |
$('#submit').on('click', function(event) { $('<p>送信されました</p>').insertBefore(this); }); |
送信ボタンをクリックすると、以下のHTMLになります。
挿入後のHTML
|
1 2 |
<p>送信されました</p> <button id="submit">送信</button> |
３．要素の後に挿入するafter(), insertAfter()
セレクトされた要素の後ろにHTMLを挿入することができます。基本的な文法は、before(), insertBefore()と同様です。
（例）after()
|
1 2 3 |
$('#submit').on('click', function(event) { $(this).after('<p>送信されました</p>'); }); |
（例）insertAfter()
|
1 2 3 |
$('#submit').on('click', function(event) { $('<p>送信されました</p>').insertAfter(this); }); |
送信ボタンをクリックすると以下のHTMLになります。
挿入後のHTML
|
1 2 |
<button id="submit">送信</button> <p>送信されました</p> |
