innerHTMLってなに？
innerHTMLとは、HTML要素の中身を取得したり、変更したりすることができるプロパティです。
<h1>りんご</h1>
//取得
//りんご
<h1>おはようございます</h1>
//変更
//<h1>こんにちは</h1>HTML内に「りんご」という見出しがあった場合に、innerHTMLを使えば「りんご」という文字列を取得することができます。
また、「おはようございます」という文字列を別の文字列に変更することも可能です。
innerHTMLの使い方
では、innerHTMLを使ってHTML要素を「取得」する方法と「変更」する方法について詳しく見ていきます。
HTML要素を取得する
getElementByIdを用いてid「fruit」を取得します。
そして、console.logを使って、h1タグの中身を取得するために、「fruit.innerHTML」と指定します。
結果は「りんご」とうい結果が表示されます。
innerHTMLは指定したHTML要素の中身を簡単に取得することができるのです。
//HTML
<h1 id="fruit">りんご</h1>
//JavaScript
const fruit = document.getElementById('fruit');
console.log(text.innerHTML);
//表示結果
りんごHTML要素を変更する
先ほどと同じように、idをgetElementByIdで取得します。
innerHTMLでHTML要素の中身を変更する場合は、「element.innerHTML = ‘文字列’」とすることで中身を変えることができます。
今回であれば、「fruit.innerHTML = ‘みかんが好きです’」と指定することで、h1タグの「りんごが好きです」という文字列が「みかんが好きです。」という文字列に変更されます。
//HTML
<h1 id="fruit">りんごが好きです</h1>
//JavaScript
const fruit = document.getElementById('fruit');
fruit.innerHTML = 'みかんが好きです。';
//表示結果
みかんが好きです。
