Javascript-06. js에서 html에 요소 추가하기

js에서 html에 이미지를 추가해본다.
먼저, img 폴더를 만들고, 0.jpeg, 1.jpeg, 2.jpeg를 추가한다.

그리고 background.js 파일을 생성한다.
생성한 후 html에도 당연히 연결해준다.

background.js에는 img의 array를 만든다.

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

그리고 그 중에 하나를 랜덤하게 선택하는 const를 만든다.

const chosenImg = imges[Math.floor(Math.random() * imges.length)];

백그라운드 이미지에 대한 const도 만든다. 이때
createElement("img")는 html 도큐먼트에 img 태그를 새롭게 생성해준다.

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

그다음에 bg Img의 source를 chosen img로부터 랜덤하게 선택해준다.

bgImg.src = `img/${chosenImg}`

마지막으로, html의 body에 랜덤하게 선택되는 bgImg를 넣어준다.

document.body.appendChild(bgImg);