JavaScriptを習得したい

on Note

innerHTMLはどんなプロパティか

innnerHTMLプロパティを使うことで、HTMLタグの中身の、読み込みや上書きができるようになります。よって動的なページにすることに繋がります。

HTML要素の読み込み

下のコードは、HTML要素の中身を読み込んでconsoleに表示させる、というコードの例です。cosoleには「<p>こんにちは</p>」と、pタグも含めてdiv要素の中身がそのまま表示されます。

<div id="testid">
    <p>こんにちは</p>
</div>
    
<script>
    let testdiv = document.getElementById("testid");
    console.log(testdiv.innerHTML);
</script>

ウェブページでは下のように「こんにちは」と表示されます。

こんにちは

consoleウィンドウでは、document.getElementById("testid")で取得したid名「testid」が指定されたdiv要素の中身として<p>こんにちは</p>が表示されます。

console.log(testdiv.innerHTML);の部分で.innerHTMLが指定されている為、id名「testid」のdiv要素の中身だけがconsoleに表示されます。

.innerHTMLを指定せずconsole.log(testdiv);とすると、id名「testid」が指定されたdiv要素そのものも一緒に表示されます。

.innerHTMLの指定によって、中身だけが読み込まれている わけです。

要素の内容を上書きする

下のコードでは、表示された「こんにちは」を、ボタンを押して「おはようございます」に変更します。

<div id="morning">
    <p>こんにちは</p>
</div>
<button onclick="textElement()">言い直す</button>

<script>
function textElement(){
    let greeting = document.getElementById("morning");
    greeting.innerHTML = "<p>おはようございます</p>";
}
</script>

こんにちは

.innerHTMLを使って対象の要素(今回はid名「morning」のdiv要素)の内容を上書きしています。

.innerHTMLで新しい値(今回は<p>おはようございます</p>)を設定すると、対象の要素の元の内容(今回は<p>こんにちは</p>)が削除されて、新しい値が追加されます。

.innerHTMLで新たに指定する値は、特別な記号が含まれていてもそのままの状態で追加されます。なので値にHTMLタグを含めれば、タグとして扱われます。

新たな値としてscriptタグが含まれるHTML文も設定はできますが、.innerHTMLを利用して設定されたスクリプトは実行されません。