「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タグだけでなく、他のさまざまな要素を生成することができるので、ぜひやってみて下さい。
プログラムの流れをまとめると、
- タグの生成
- 属性の追加
- タグの表示
で、JavaScriptを使ったHTML要素の表示ができます。
以上です。