JavaScriptでimgタグを生成して、画像を表示する方法

「JavaScriptを使えば、HTMLを書かなくても、画像を表示することができるんです！」

というわけで、この記事では、サンプルコードの紹介とコードの解説をしていきます。よろしくお願いします。

まずはサンプルコードを見て下さい。

JSのコードがあるだけで、HTMLは何も書かれていません。でも画像が表示できています。

See the Pen
HTMLタグの生成と属性の追加 by MacLove (@maclove1)
on CodePen.

このように、HTMLは一切書かなくても、JavaScriptでプログラムすれば画像の表示（imgタグの追加）ができるのです。

解説をしていきます。

JavaScriptでimgタグを追加する方法

JavaScriptを使って、imgタグを追加する方法を解説していきます。

①タグを生成する

imgタグを生成するためには「createElement()」を使います。

createElementで、生成した要素を「変数icon」に入れます。

var icon = document.createElement('img');

②属性を追加する

次に、表示させる画像を指定します。そのためには、src属性を追加してURLを記入します。

属性を追加するには、

icon.src = "https://cdn.shortpixel.ai/client/q_glossy,ret_img/https://taiyosite.com/wp-content/uploads/2020/08/icon-150x150.png";

のように、変数名.属性名 = “”　とします。

src属性以外にも、画像の代替テキスト「alt属性」なども追加できます。

icon.alt = "アイコン";

③imgタグを表示する

最後に、作ったimgタグを表示させましょう。以下のコードで、画像が表示できます。

document.body.appendChild(icon);

サンプルコード

サンプルコードの全文です。

//①タグの生成
var icon = document.createElement('img');

//②属性の追加
icon.src = "https://cdn.shortpixel.ai/client/q_glossy,ret_img/https://taiyosite.com/wp-content/uploads/2020/08/icon-150x150.png";
icon.alt = "アイコン"

//③タグの表示
document.body.appendChild(icon);

まとめ

JavaScriptでimgタグを生成する方法をご紹介しました。

imgタグだけでなく、他のさまざまな要素を生成することができるので、ぜひやってみて下さい。

プログラムの流れをまとめると、

1. タグの生成
2. 属性の追加
3. タグの表示

で、JavaScriptを使ったHTML要素の表示ができます。

以上です。