[바닐라 js 챌린지] 6.1강 createElement(), appendChild() ✨

6.1
저번 시간에는 명언을 랜덤으로 배치했다면 이번에는 배경이미지를 랜덤 배치해볼거다. 
개념이 조금 겹치니 참고하실 분은 참고하세요 !!

2022.06.16 - [웹 개발/javascript] - 바닐라 js 2주 챌린지 6.0강 정리 ✨

바닐라 js 2주 챌린지 6.0강 정리 ✨

지금까지는 javascript를 이용해서 HTML에서 뭔가를 가져왔었지만 이번 시간에는 

먼저 javascript에서 만든 후, 그걸 HTML에 넣어볼 것이다. 

const images = ["1.jpeg", "2.jpeg","3.jpeg"];
// 미리 img폴더 안에 만들어둔 이미지 세개를 적는다.
const chosenImage = images[[Math.floor(Math.random()* images.length)]];

console.log(chosenImage);

Math.floor와 Math.random을 이용해서 콘솔안에서는 랜덤으로 나오게끔 만들었다.

createElement()

: 자바스크립트를 이용하여 HTML 요소를 생성할때 사용하는 메서드 

const bgImage = document.createElement("img");
bgImage.src=`img/${chosenImage}`;

요소를 생성하기 위해서 createElement을 사용했다. 그리고 아까 만든 랜덤배치 코드를 bgImage에 넣어준다.

이제 생성한 요소를  HTML에 넣어야 한다.

appendChild()

:  선택한 요소 안에 자식 요소를 추가하는 메서드

 

document.body.appendChild(bgImage);

<img>태그를 가진 bgImage를 body태그 내부에 넣어주었다.
여기까지 하면 홈페이지에 내가 저장한 사진이 뜨고 새로고침할때마다 바뀌는걸 확인할 수 있다 ✨