바닐라 JS로 크롬 앱 만들기 [5-2] Background

---

자바스크립트에서 이미지 불러올 때 이미지의 이름과 동일해야 함

사진 랜덤으로 불러오기

const images = ["0.jpg", "1.jpg", "2.jpg"]; // 사진과 이름 같아야 함

const chosenImage = images[Math.floor(Math.random() * images.length)];

이제 HTML에 만든 자바스크립트를 보내야함
→ document.createElement 사용

HTML에 보내기

const images = ["0.jpg", "1.jpg", "2.jpg"]; // 사진과 이름 같아야 함

const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

console.log(bgImage);

결과 :
<img src="img/2.jpg">

---

위에서 만든 랜덤 이미지를 body에 넣기

const images = ["0.jpg", "1.jpg", "2.jpg"];

const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

console.log(bgImage);

document.body.appendChild(bgImage)

document.body.appendChild() : body에 html 추가하는 것
append : 가장 뒤에 추가
prepend : 가장 위에 추가