img要素を作成する
createElementメソッドを使ってimg要素を作成し、画像パス（画像のURL）のsrc属性を指定することで、動的に画像を追加することができます。
以下の例では、新しいimg要素を作成したら変数img_elementに入れて、属性を設定したあとにid属性「content_area」を持つHTML要素へ挿入します。
JavaScript コード例
// img要素を作成let 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要素を挿入let 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要素へ挿入します。
JavaScript コード例
let picture_element = document.createElement('picture');
let img_element = document.createElement('img');img_element.src = 'image/rhinos.png';img_element.alt = 'さいくん';img_element.width = 200;img_element.height = 200;
// source要素を追加let 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要素を挿入let 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>