JavaScript

レシピ

HTML・DOM

img要素を動的に作成して画像を表示する

JavaScriptでimg要素picture要素を作成してページに追加することで、動的に画像を表示する方法について解説します。

この記事のポイント

  • createElementメソッドimg要素を作成する
  • 画像パス(URI)や代替テキスト、widthheightのような属性を指定する

目次

img要素を作成する

createElementメソッドを使ってimg要素を作成し、画像パス(画像のURL)のsrc属性を指定することで、動的に画像を追加することができます。

以下の例では、新しいimg要素を作成したら変数img_elementに入れて、属性を設定したあとにid属性content_area」を持つHTML要素へ挿入します。

コード例

// img要素を作成
var img_element = document.createElement('img');
img_element.src = 'image/rhinos.png'; // 画像パス
img_element.alt = 'さいくん'; // 代替テキスト
img_element.width = 200; // 横サイズ(px)
img_element.height = 200; // 縦サイズ(px)

// 指定した要素にimg要素を挿入
var content_area = document.getElementById("content_area");
content_area.appendChild(img_element);

このコードを実行すると、id属性content_area」を持つHTML要素に以下のようにimg要素が追加され、指定したパス(URL)の画像が表示されます。

HTMLコード例

<article id="content_area">
  <img src="image/rhinos.png" alt="さいくん" width="200" height="200">
</article>
ブラウザの表示例

picture要素を作成する

picture要素で画像を表示する場合についても、上記と同様にcreateElementメソッドを使って作成することができます。

以下の例ではまずpicture要素を作成し、その後に表示するimg要素source要素を1つずつ作成してから、id属性content_area」を持つHTML要素へ挿入します。

コード例

var picture_element = document.createElement('picture');

var img_element = document.createElement('img');
img_element.src = 'image/rhinos.png';
img_element.alt = 'さいくん';
img_element.width = 200;
img_element.height = 200;

// source要素を追加
var source_element = document.createElement('source');
source_element.srcset = 'image/rhinos_s.png';
source_element.media = '(min-width: 800px)';

// picture要素にimg要素とsource要素を追加
picture_element.appendChild(img_element);
picture_element.appendChild(source_element);

// 指定した要素にpicture要素を挿入
var content_area = document.getElementById("content_area");
content_area.appendChild(picture_element);

3つの要素を作成した後に、picture要素に子要素としてimg要素source要素appen dChildメソッドで追加してから、最後にid属性content_area」を持つHTML要素に挿入します。
上記のコードを実行したあとのHTMLコードは次のようになります。

HTMLコード例

<article id="content_area">
  <picture>
    <img src="image/rhinos.png" alt="さいくん" width="200" height="200">
    <source srcset="image/rhinos_s.svg" media="(min-width: 800px)">
  </picture>
</article>

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。