Document.createElement()

• HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환한다.

const element = document.createElement(tagName);

사용 예시

// 랜덤으로 보여줄 이미지들의 배열 생성
const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"];
 
// Math.random()으로 무작위 숫자를 생성한다. (0이상 1미만의 숫자들이다.)
// 무작위로 생성된 숫자에 images.length (이미지 배열의 길이)를 더하면 
// 5.124341 과 같은 float 숫자가 생성된다.
// 소수점이 있으면 실행이 안되기 때문에 잘라주어야 하는데
// floor 를 사용하여 소수점 내림을 해주어 소수점을 버려준다.
// 그 값을 chosenImage에 넣어준다.
const chosenImage = images[Math.floor(Math.random() * images.length)];
 
// HTML문서에 요소를 생성하는 코드이다.
// 생성할 태그는 img 이고 생성된 것을 bgImage에 담는다.
const bgImage = document.createElement("img");
 
// HTML에서 <img src=""> 를 정해주는 것과 같은 것이다.
// 이미지 소스에 경로를 지정한다.
// `img/` 는 폴더 이름이고 그 내부의 이미지들을 무작위로 꺼내기 위해
// 아까 생성한 chosenImage를 경로에 넣는다.
bgImage.src = `img/${chosenImage}`;
 
// HTML body에 방금 만든 img 태그를 넣어준다.
// prepend() 는 body에서 가장 위에 위치한다.
document.body.appendChild(bgImage);