MENU
JavaScript

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

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

 

この記事では、JavaScriptを使って、タグの生成を行い、画像を表示するプログラムのサンプルコードと解説をします。

 

まずはサンプルコードです。

見ての通り、HTMLは書いていません。

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

このように、JavaScriptを使えば、imgタグを生成して画像を表示することができるのです。

 

流れとしては、

  1. タグの生成
  2. 属性の追加
  3. タグの挿入

となります。

 

解説です。

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

JavaScriptで画像を表示するプログラムをご紹介します。

 

①タグの生成

タグの生成は「document.createElement(‘タグ名’)」で行います。

生成した要素は、変数 image に入れておきます。

const image = document.createElement('img');

 

 

②属性を追加する

画像の表示には、src属性が必要です。

src属性を追加するには、

image.src = "test.png";

 

 

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

 

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

image.alt = "アイコン";

 

 

 

③タグの挿入

作成した要素は、挿入することで、HTMLタグとして機能します。

document.body.appendChild(image);

 

変数image をHTMLのbodyタグに挿入します。

 

 

サンプルコード

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

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

// ②属性の追加
icon.src = "test.png";
icon.alt = "アイコン"

// ③タグの挿入
document.body.appendChild(image);

 

 

まとめ

JavaScriptで画像を表示する方法をご紹介しました。

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

  1. タグの生成
  2. 属性の追加
  3. タグの挿入

となります。

これは、imgタグだけでなく、他の要素の生成もできます。