innerHTMLの使い方について【JavaScript】

JavaScript

 

今回は、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のプログラミングをマスターしていきましょう。