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

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

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

1 innerHTMLでdivタグを書き換える方法
- 1.1 ボタンクリックによるdivタグ内の文字列変換
- 1.2 文字サイズの変換
2 appendChildとの違い
3 案件量が豊富なアルマサーチ

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

innerHTMLの公式は以下です。

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

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

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

<script type="text/javascript">

</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">

</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>