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

18/11/25 17:46:17     19/05/05 15:15:03

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の方が便利でしょう。

案件量が豊富なアルマサーチ

アルマサーチ

最後に、アルマサーチのご紹介!

アルマサーチはフリーランス向けに案件をご紹介することに特化したエージェントサービスです。豊富な案件量から、安定して継続的な案件のご紹介を実現しており、口コミから登録エンジニアが急増中です。

アルマサーチが選ばれる理由

  1. 豊富な案件量。週3?4日の案件や在宅リモート案件も。
  2. 優秀なコンサルタント陣。
  3. 案件に参画後もしっかりサポート。

豊富な案件量

フリーランス向けに特化し、業界屈指の案件量を誇ります!週3?4日の案件や、在宅リモート案件もありますし、その他あらゆる希望をしっかりお伝えください。最適な案件のご紹介をさせていただきます。

優秀なコンサルタント陣

技術に疎く、開発の希望を伝えても響かないエージェント・・・嫌ですよね。アルマサーチにはそのような者は一切おりません!さらに独立にまつわる税金や保険関係に詳しいスタッフが徹底的にサポートさせていただきます。

案件に参画後もしっかりサポート

常駐先が決まった瞬間に、一度も連絡が取れなくなるエージェント・・・いますよね?アルマサーチでは、そのようなことは一切ありません!常に電話やメールは即対応しますし、月に1度のランチミーティングなどから現場の状況を細かくヒアリングし、就業環境改善に尽力いたします。

相談する

人気記事

編集部おすすめ記事

この記事を読んだ人はこんな記事を読んでいます

案件探しやフリーランスになるための相談する