【JavaScript】innerHTMLとは

Udemy ちゃんと学ぶ、HTML/CSSのJavaScriptで勉強中にでてきた「innerHTML」

備忘録で書いとこ

innerHTMLとは

html要素の中身を変更するプロパティ。

例えば「START」ボタンがあって、クリックしたら「STOP」と表記するボタンに変えたい。

そのとき使うもの。

使い方

element.innerHTML;

elementには要素名(idで指定するところ)を書く。

例

「START」ボタンをクリックすると「STOP」ボタンになるというやつ

<body>
    <div>
        <button id="start_stop" class="btn-primary">START</button>
    </div>
<script>
    document.getElementById('start_stop').addEventListener('click', function() {
        this.innerHTML = 'STOP';
    });
</script>
</body>

ボタンイメージ

クリック前

クリック後