お役立ち情報

innerHTMLでdivタグ内の要素を修正する方法をわかりやすく解説!

innerHTMLのイメージ

innerHTMLとは、HTMLタグの中身を読み込んだり修正したりするためのプロパティです。これにより動的なWebページを作成できる点が大きなメリットになります。

innerHTMLでdivタグを書き換える方法

innerHTMLの公式は以下です。

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

上記の公式を利用して、innerHTMLプロパティでテキストを書き換えるサンプルコードを紹介します。

ボタンクリックによるdivタグ内の文字列変換

<script type="text/javascript">
<!--
function disp() {
    document.getElementById("dat").innerHTML = "<span style='color: red;'>Hello World!</span>";
}
//-->
</script>
<div style="background-color : #CCC;">
    <form>
        <p id="dat" style="font-size: 120%;">こんにちは世界!</p>
        <input type="button" value="書換" onClick="disp()">
    </form>
</div>

 

上記のコードを記述すると「書換」ボタンが表示され、ボタンを押すと「こんにちは世界!」から「Hello World!」に変換されます。

またそれと同時に、styleで色を赤に設定しています。次に、配列の中身を表示するプログラムのサンプルコードを紹介します。

<script type="text/javascript">
<!--
function disp() {
    var birds = ["ハト", "カラス", "鶏", "ダチョウ", "ガチョウ", "クジャク"];
    document.getElementById("dat").innerHTML ="";
    document.getElementById("dat").innerHTML +="<br>";
    for (var i=0; i< birds.length; i++) {
        document.getElementById("dat").innerHTML
            += " birds ["
                + i
                + "]:"
                + birds [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>

 

上記のソースコードを記述すると、「表示」ボタンが表示されます。
そしてそのボタンをクリックすると、

[“ハト”, “カラス”, “鶏”, “ダチョウ”, “ガチョウ”, “クジャク”]

という鳥の要素が入った配列の中身が表示されます。

デフォルトは空白にしていますが、もともと何らかの文字列が入っていた場合新たに配列の内容に書き換えられます。

文字サイズの変換

また便利な使い方として、divタグ内の文字サイスの変更があります。

h1タグをh2タグに書き換えたいとき等あるかと思いますが、innerHTMLを使用すると便利です。

<html>
    <body>
        <div id="divTag">
            <h1>変更前</h1>
        </div>
        <input type="button" value="Click" onclick="buttonClick ()">
    <script>
        var buttonClick = function(){
            var divTag = document.getElementById("divTag");
            divTag.innerHTML = "<h2>h2タグに変更しました</h2>";
        }
        </script>
    </body>
</html>

 

上記のソースコードを記述すると、まず「変更前」という文字列と「Click」というボタンが表示されます。そしてそのボタンをクリックすると、「h2タグに変更しました」という文字列が表示されます。

これで文字列と一緒に、タグもh1からh2に切り替わりました。

appendChildとの違い

innerHTMLと似たものにappendChildがあります。

appendChildはinnerHTMLと違って、要素を書き換えるのではなく追加していく使い方になります。以下がサンプルコードです。

<html>
    <body>
    <p>ボタンをクリック</p>
    //このdivタグ内に文字列を表示させます
    <div id=" divTag "></div>
    <input type="button" value="appendChild" onclick="func()">
    <script>
        var divTag = document.getElementById("divTag ");
        var func = function(){
            var pTag = document.createElement("p");
            var text = document.createTextNode("appendChild");
            myp.appendChild(text);
            mydiv.appendChild(pTag);
    }
    </script>
    </body>
</html>

 

上記のソースコードを記述すると、「appendChild」というボタンが表示されます。そして、ボタンを押すごとに「appendChild」という文字列が追加されていきます。

たとえば同様のコードをinnerHTMLを使用すると以下のようになりますが、innerHTMLだと毎回文字列が変換されます。

<html>
    <body>
    <p>ボタンをクリック</p>
    //このdivタグ内に文字列を表示させます
    <div id="divTag"></div>
    <input type="button" value="innerHTML" onclick="func()">
    <script>
        var divTag = document.getElementById("divTag ");
        var func = function(){
            divTag.innerHTML = "<p>innerHTML</p>";
        }
    </script>
    </body>
</html>

 

上記のソースコードを実行すると、「innerHTML」というボタンが表示されます。そしてそのボタンを押すと、「innerHTML」というテキストが表示されます。ボタンを押すたびにテキストが更新されますが、テキストの数は一つのままです。

基本的にinnerHTMLとappendChildの使い方は似ていますが、要素を置き換えるのか追加するのかという点で違いがあります。既存のコードが上書きされてほしくない場合などはappendChildの方が便利でしょう。

キャリアカウンセリングのプロとして
あなたに合った案件をご案内します。

まずはお気軽にお問い合わせください!

イメージ