JavaScript【innerHTML】表示内容の書き換え

JavaScript で何らかの処理が行われた結果、画面上に新たな表示を行うプログラムを作る際に、表示内容のサイズが想定できる場合は予め表示領域を確保することができますが、そうでない場合は 表示スペースをどの程度用意するか悩ましいところです。
このような時に、innerHTML プロパティを使用すると、元のHTMLの要素の中身を書き換えて表示することができます。
今回は、innerHTML プロパティを使用して 表示内容を書き換える方法について紹介します。

1. innerHTML とは

　
innerHTML は、HTML要素の中身を変更する際に使用する Elementオブジェクトのプロパティです。

Elementオブジェクトは、HTMLの エレメント（ 要素 ）を表すオブジェクトです。

div要素（ <div> ～ </div> ）等、HTML要素の内容を自由に変更できることによって、動的なWebページの作成が可能になります。

　
innerHTML プロパティを使って、次のような記述をすると、HTML要素の内容を書き換えることができます。

document.getElementById("id 名").innerHTML　=　書き換え後の内容； 

「 id 名 」には、書き換え対象となる HTML要素の id 名を指定します。

▲目次へ戻る

2. テキストの書き換え

innerHTML プロパティを使って、テキストの書き換えをします。
書換ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    document.getElementById("dat").innerHTML = "<span style='color: red;'>Hello！</span>";
}
//-->
</script>

<div style="background-color : #CCC;">
    <form>
        <p id="dat" style="font-size: 120%;">こんにちは！</p>
        <input type="button" value="書換" onClick="disp()">
    </form>
</div>

　
デフォルトで、「 こんにちは！ 」というテキストを表示する p 要素を、書換ボタンがクリックされたタイミングで「 Hello！ 」というテキストに書き換えています。

書き換え後のテキストを赤字にするための CSS（ “<span style=’color: red;’> </span> ）も、タグをそのまま記述して指定できます。

▲目次へ戻る

3. 実行結果を表示

先ほどのサンプルは、既に表示されていたテキストを、違う内容に書き換えましたが、デフォルトでは何も表示させず、プログラム実行の結果として、innerHTML プロパティを使って何らかの表示をする場合も、同様に記述します。
　

次のサンプルは、配列変数の中身を表示するプログラムです。
表示ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    var fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも", "レモン"];

    document.getElementById("dat").innerHTML ="";
    document.getElementById("dat").innerHTML +="<br>";

    for (var i=0; i<fruits.length; i++) {
            document.getElementById("dat").innerHTML
                += "fruits["
                   + i
                   + "]："
                   + fruits[i]
                   + "<br>";
            document.getElementById("dat").innerHTML +="<br>";
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        ["りんご","みかん","ぶどう","メロン","もも","レモン"]
　
        <div style="display:inline-flex;">
            上の配列の値の格納状態を表示します
            <input type="button" value="表示" onClick="disp()">
        </div>
        <div id="dat" style="background-color : #EEE;"></div>　
    </form>
</div>

タグをそのまま記述して指定できるので、「 <br> 」で改行もできます。
<table> や <tb> 等を使用すると、テーブル表示も可能です。

このサンプルのように、innerHTML プロパティを使用すると、表示させたい内容のサイズに合わせて表示領域が自動的に伸縮されるので、大変便利です。

▲目次へ戻る