Element: innerHTML プロパティ

（Web API ＞ Element）
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

innerHTMLは、HTML要素の中身を変更するときに使われるプロパティである。HTML要素の中身を自由に変更することで、動的なWebページを作成できる。
innerHTMLプロパティは、読み込みと書き込みの両方に対応している。

指定する要素名.innerHTML;

// 変数に指定要素のHTMLコードを代入する
let sample = 指定する要素名.innerHTML;

// 指定要素に変数の値を代入
指定する要素名.innerHTML = sample2;

HTML要素を取得する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    <h1 id="text">こんにちは！</h1>

    <script type="text/javascript">
    const text = document.getElementById('text');

    console.log(text.innerHTML); // こんにちは！
    </script>
  </body>
</html>

HTML要素を変更する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

　<!-- 実行すると「こんにちは！」という文字列が「おはようございます！」という文字列に変更される -->
    <h1 id="text">こんにちは！</h1>

    <script type="text/javascript">
    const text = document.getElementById('text');
    text.innerHTML = 'おはようございます！';
    </script>
  </body>
</html>

innerHTMLは、HTML要素自体も追加することができる

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    <div id="container">
  <!-- 実行するとh3タグの「おはようございます！」が追加される -->
    </div>

    <script type="text/javascript">
    const container = document.getElementById('container');
    container.innerHTML = '<h3>おはようございます！</h3>';
    </script>
  </body>
</html>

innerHTMLとinnerTextの違い

  • innerHTML：HTML要素を追加した際、きちんとHTML要素として反映してくれる
  • innerText：HTML要素を追加した際、HTML要素も文字列として表示される
inserted by FC2 system