jQuery を使用して innerHTML を更新する

この記事では、jQuery の要素の内部 HTML を更新または置換する方法について学習します。

jQuery を使用して innerHTML を更新する

jQuery は、一致した要素のセット内の各要素の HTML コンテンツを設定するための .html() メソッドを提供します。

構文：

.html(htmlString).html(function)

1. htmlString は、一致する各要素のコンテンツとして設定された HTML 文字列です。
2. function はセットに対して HTML のコンテンツ素材を返します。セット内の要素の古い HTML 値とインデックスは引数と見なされます。

関数を呼び出す前に、jQuery は要素を空にします。次に、古い HTML 引数を使用して、古いコンテンツを参照します。this は、関数内のセット内の現在の要素を参照できます。

.html() を使用して要素のコンテンツを設定すると、その要素のコンテンツはすべて新しいコンテンツに完全に置き換えられます。さらに、jQuery は、子要素を新しいコンテンツに置き換える前に、子要素から情報やイベントハンドラーなどの他の構造を取り除きます。

このメソッドでは、ブラウザの innerHTML プロパティが使用されます。

一部のブラウザは、提供された HTML ソースを正確に複製する DOM を生成しない場合があります。 .html() メソッドではなく、.text() メソッドを使用して、HTML を含まない script 要素のコンテンツを設定します。

次の例で理解しましょう。

HTML コード：

<div class="txt-container">Hello World! Welcome to the DelftStack.</div>
<button type="button">Change the text</button>

JavaScript コード：

$('button').click(() => {
  $('div.txt-container')
      .html('<p>Thank you for visiting <em>DelftStack!</em></p>');
})

上の例では、div 要素を定義して、Hello World! Welcome to the DelftStack. というメッセージを表示します。Change the text ボタンをクリックすると、DOM が新しい段落タグで更新されます。

jQuery をサポートするブラウザで上記のコードスニペットを実行してみてください。次の結果が表示されます。

テキストを変更する前の出力：

テキスト変更後の出力：

デモを実行