[jQuery入門]　jQueryを使ってhtmlを変更/追加してみる。

2020年5月16日

今回はjQuery入門として、jQueryでhtmlの文字や要素を変更する方法をご紹介したいと思います。

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第10回目！　

自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

1. jQueryでhtmlの文字列を変更する。
- 1.1.
2. jQueryを使ってhtml要素を追加する。
3. 最後に

jQueryでhtmlの文字列を変更する。

それでは早速いきましょう。htmlファイルにある

  <div>
    <button type="button">ボタンを押してください。</button>
    <div id="aaa">AAA</div>
  </div>

$(function() {
  //クリックしたら発火
  $('button').click(function() {
 　　//要素の”テキスト”が置き換わる
    $('#aaa').text('AAAのテキストが変更されました。');
 
  });
});

もともとの”AAA"というテキストが、そのまま”AAAのテキストが変更されました。”に置き換わるイメージです。

シンプル！！

jQueryを使ってhtml要素を追加する。

次は新しい要素を追加する場合。

  <div>
    <button type="button">ボタンを押してください。</button>
    <div id="aaa">AAA</div>
  </div>

  $(function() {
    //クリックしたら発火
    $('button').click(function() {
 
      // 指定した要素の中に、新たなhtmlが追加される
      $('#aaa').html('<a href="hoge">aaaにリンクが追加される。</a>');
    });
  });

ここでは、

<div id="aaa">AAA</div>の

”AAA”

というテキストが、そのまま、

<a href="hoge">aaaにリンクが追加される。</a>

に置き換わるイメージです。html()では、指定要素内に、要素が追加されます。もともとあったテキストは完全に置き換わります。