[책] 자바스크립트 코드 레시피 278 - 175일차

스크립트로 이미지 요소 추가하기

• 동적으로 이미지를 배치하고 싶을 때
• 대량의 이미지를 효율적으로 배치하고 싶을 때

구문

new Image();

설명

img 요소의 인스턴스는 Image 객체를 사용해 생성하며, new Image() 대신 document.createElement('img')를 사용할 수도 있습니다. 작성한 요소는 DOM 트리에 추가가 필요하며, body 요소 내 표시하고자 할 때는 document.body.appendChild()를 사용합니다.

실습

index.html

<div class="container"></div>

---

script.js

const container = document.querySelector('.container');
for (let i = 1; i < 6+1; i++) {
  const img = new Image();
  img.src = `image_${i}_.jpg`; // src 속성에 파일 주소 속성
  img.alt = `이미지_${i}`;
  container.appendChild(img); // 요소에 삽입
}