[JavaScript] 자바스크립트에서 스크립트로 이미지 요소 추가하기
2022. 7. 22. 22:34ㆍProgram/JavaScript
188_자바스크립트에서 스크립트로 이미지 요소 추가하기
[적용]
- 동적으로 이미지를 배치하고 싶을 때
- 대량의 이미지를 효율적으로 배치하고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| new image() | img 요소 인스턴스 생성 | img 요소 |
[내용]
img 요소의 인스턴스는 Image 객체를 사용해 생성하며, new Image() 대신
document.createElement('img')를 사용할 수도 있다.
작성한 요소는 DOM 트리에 추가가 필요하며,
body 요소 내 표시하고자 할 때는 document.body.appendCHild()를 사용한다.
HTML index.html
<body>
<div class="container"></div>
</body>JavaScript main.js
// 삽입하고 싶은 요소를 참조
const container = document.querySelector('.container');
for (let i = 0; i < 6; i++) {
// Image 객체 생성
const img = new Image();
// src 속성에 파일 주소 지정
img.src = `images/photo-${i}.jpg`;
// 요소에 삽입
container.appendChild(img);
}
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 스크립트로 사운드 제어하기 (0) | 2022.07.24 |
|---|---|
| [JavaScript] 자바스크립트에서 사운드 사용하기 (0) | 2022.07.24 |
| [JavaScript] 자바스크립트에서 Base64 형식 이미지 표시하기 (0) | 2022.07.22 |
| [JavaScript] 자바스크립트에서 이미지 로딩 지연시키기 (1) | 2022.07.22 |
| [JavaScript] 자바스크립트에서 이미지 로딩 후 작업하기 (0) | 2022.07.22 |