【JavaScript】innerHTMLの使い方

6906 ワード
初心者 プログラミング勉強日記 JavaScript JavaScript テキストリンク

プログラミング勉強日記

2021年1月10日
今日はinnerHTMLの使い方について簡単にまとめる。

innerHTMLとは

　HTML要素の中身を変更するときに使われるプロパティである。HTML要素の中身を自由に変更することで、動的なWebページを作成できる。
　

innerHTMLの書き方

　innerHTMLプロパティは、読み込みと書き込みの両方に対応している。

innerHTMLの書き方
指定する要素名.innerHTML;

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

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

HTML要素を取得する方法

サンプルコード
<html>
  <body>

    <div id = "idName">
      <p>Hello World</p>
    </div>

  <script>
    var mydiv = document.getElementById("idName");

    console.log(mydiv.innerHTML);
  </script>

  </body>
</html>
コンソール結果
Hello World

HTML要素に値を追加する方法

サンプルコード
<html>
  <body>

    <h1 id="idName">クリック前</h1>
    <input type="button" value="Click" onclick="myfunc()">

    <script>
      var myfunc = function(){

        var myh1 = document.getElementById("idName");
        myh1.innerHTML = "クリック後";


      }
    </script>

  </body>
</html>

実行結果

HTMLタグを変更する方法

サンプルコード
<html>
  <body>

    <div id="idName">
      <h1>クリック前</h1>
    </div>

    <input type="button" value="Click" onclick="myfunc()">

    <script>
      var myfunc = function(){

        var mydiv = document.getElementById("idName");
        mydiv.innerHTML = "<h3>クリック後(h3に変更)</h3>";

      }
    </script>

  </body>
</html>

実行結果

参考文献

要素の中身を変える！JavaScriptでinnerHTMLの使い方【初心者向け】
【JavaScript入門】innerHTMLでdivタグ内の要素を取得、設定する方法