要素にHTML内容を取得・設定

2024 5/12

2024.05.11 2024.05.12

記事の内容

概要

htmlメソッドは、要素のHTMLコンテンツを取得または設定するために使用されます。

html

記法

$(“対象要素”).html();

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>htmlについて</title>
  </head>
  <body>
    <div id="element">
      <main>
        <section>
          <h2>セクションのタイトル</h2>
          <p>ここにセクションのコンテンツが入ります。</p>
        </section>
      </main>
    </div>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

var content = $("#element").html();

// 取得HTMLコンテンツ
console.log(content);

出力結果(コンソールログ)

<main>
　<section>
　　<h2>セクションのタイトル</h2>
　　<p>ここにセクションのコンテンツが入ります。</p>
　</section>
</main>

HTMLコンテンツを変更

html

記法

$(“対象要素”).html(“内容”);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html(HTMLコンテンツを変更)について</title>
  </head>
  <body>
    <div id="element">
      <main>
        <section>
          <h2>セクションのタイトル</h2>
          <p>ここにセクションのコンテンツが入ります。</p>
        </section>
      </main>
    </div>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

$("#element").html("<p>HTML要素を変更しました。</p>");

出力結果

HTML要素を変更しました。