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

jQueryでHTMLタグを挿入する方法を紹介します。 サイトを制作していると、ボタンを押した時に任意のHTMLを挿入したいことなどがしばしばあります。 jQueryでは、以下に挙げる3つの方法でHTMLを挿入することができます。 挿入前のHTML


1.要素を書き換えるhtml()

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

$('#submit').on('click', function(event) {
  $(this).html('送信されました');
});
送信ボタンをクリックすると、buttonタグの中が「送信」から「送信されました」に書き換えられます。

2.要素の前に挿入するbefore(), insertBefore() 

「before()」メソッドは、セレクトされた要素の前に挿入するメソッドです。 以下は、送信ボタンをクリックすると、buttonタグの前に「送信されました」と表示されるようにする例です。 (例).before()

$('#submit').on('click', function(event) {
  $(this).before('

送信されました

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

$('#submit').on('click', function(event) {
  $('

送信されました

').insertBefore(this); });
送信ボタンをクリックすると、以下のHTMLになります。 挿入後のHTML

送信されました

3.要素の後に挿入するafter(), insertAfter()

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

$('#submit').on('click', function(event) {
  $(this).after('

送信されました

'); });
(例)insertAfter()

$('#submit').on('click', function(event) {
  $('

送信されました

').insertAfter(this); });
送信ボタンをクリックすると以下のHTMLになります。 挿入後のHTML


送信されました


イベント

2017/12/05(火)
Design Thinking Square