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

「JavaScriptを使えば、HTMLを書かなくても、imgタグを作り出して画像を表示することができます！」

この記事では、JavaScriptを使ってHTMLのimgタグを生成して、画像を表示するプログラムを紹介します。

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

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

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

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

流れとしては、

となります。

解説です。

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を使って、HTMLのimgタグを作り出し画像を表示する方法をご紹介しました。

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

となります。