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

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

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

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

挿入前のHTML

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

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

(例)html()

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

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

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

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

(例).before()

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

(例)insertBefore()

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

挿入後のHTML

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

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

(例)after()

(例)insertAfter()

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

挿入後のHTML


イベント