今回は、innerHTMLについて。
JavaScriptではよく使われるメソッドになってます。
innerHTMLとは？
innerHTMLとは、指定したHTML要素の中身を変えることができる関数のこと。
例えば、ボタンをクリックしたら、テキストが変わる実装などに使われます。
基本的な公式はこちら。
Element.innerHTML;
サンプルプログラムを書いてみよう
では実際にinnerHTMLを使ってサンプルプログラムを書いていきましょう。
HTML
HTMLのコードはこちら。
<div id="text">クリックしたらテキストが変わります。</div>
「id=’text’」を含んだdivタグを用意します。
JavaScript
JavaScriptのコードはこちら。
let text = document.getElementById('text');
text.addEventListener('click', () => {
text.innerHTML = 'テキストが変わりました！';
});
// →クリックすると、テキストが変わります
まずは、HTML要素である「id=’text’」を変数textに代入。
次にinnerHTMLを使って、textをクリックしたら「テキストが変わりました」になるようにします。
すると、テキストが変わりました。
こうやってinnerHTMLを使えば、JavaScript側でテキストを変えることもできますよ。
まとめ
以上が、innerHTMLでした。
コツコツJavaScriptのプログラミングをマスターしていきましょう。
