Javascript

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要素の表示ができます。

以上です。

関連記事