[JavaScript] innerHTMLの使い方

innerHTMLの使い方

innerHTMLとは、HTML要素の中身を取得・変更する際に使用されるプロパティ。
HTML要素の中身を変更できるので、動的にwebページを作成することができる。

要素を取得する場合

対象のHTML要素を取得し、表示する場合は以下のように書ける。

index.html

<div id="elementId">
    <p> こんにちは！ </p>
</div>

sample.js

const element = getElementById(elementId);
console.log(element.innerHTML);     //  <p> こんにちは！ </p>

要素を変更する場合

対象のHTML要素の中身を変更する場合は以下のように書ける。

const element = getElementById(elementId);
element.innerHTML = <変更内容>;    

innerHTMLは、要素を書き換えるため、変更前の内容は残っていない。単純に要素を追加したい場合は、appendChild()がある。
また、以下のようにすると対象要素の中身を削除（空）にすることができる。

element.innerHTML = "";