#JavaScript - document.createElement()로 이미지를 랜덤하게 불러와보자!

💡 document.createElement()를 활용해 엘리먼트를 생성해서 랜덤한 이미지를 나오게 해봅시다.

    <script>
        //추가할 이미지와 같은 이름의 문자열을 배열에 담고
        const images = ['o.png','1.png','2.png'];
        
        //images.length를 곱해서 랜덤하게 돌린 뒤 Math.floor로 정수값으로 만들어준 후 0,1,2까지의 랜덤한 숫자가 나오게 되면
        const chosenImage = images[Math.floor(Math.random()*images.length)];
        
        //document.createElement('추가할 엘리먼트 태그');로 엘리먼트를 생성한다.
        const bgImage = document.createElement('img');
        
        //bgImage.src로 src소스 이름에 접근해서 백틱을 이용해 `img/${랜덤하게 선택된 이미지 변수 chosenImage}`; 를 대입.
        bgImage.src = `img/${chosenImage}`;
        
        //출력해보자.
        console.log(bgImage);
    </script>

0,1,2.png로 랜덤하게 선택되고

<img src="">엘리먼트가 잘 생성된 모습을 볼 수 있습니다.

 

아직은 Javascript에만 존재하고

document에 존재하지 않으니

body 엘리먼트에 자식으로 붙혀봅시다.

 

    <script>
    
        //추가할 이미지와 같은 이름의 문자열을 배열에 담고
        const images = ['o.png','1.png','2.png'];
        
        //images.length를 곱해서 랜덤하게 돌린 뒤 Math.floor로 정수값으로 만들어준 후 0,1,2까지의 랜덤한 숫자가 나오게 되면
        const chosenImage = images[Math.floor(Math.random()*images.length)];
        
        //document.createElement('추가할 엘리먼트 태그');로 엘리먼트를 생성한다.
        const bgImage = document.createElement('img');
        
        //bgImage.src로 src소스 이름에 접근해서 백틱을 이용해 `img/${랜덤하게 선택된 이미지 변수 chosenImage}`; 를 대입.
        bgImage.src = `img/${chosenImage}`;
        
        //body에 생성한 엘리먼트를 자식으로 만들자.
        document.body.appendChild(bgImage);
 
    </script>

폴더이름도 img와 같아야되고,

이미지를 꼭 코드와 같은 이름으로 해줘야 합니다.