[JavaScript] JS 에서 HTML을 생성해서 HTML 에 추가해주기 -document.createElement()

 

이전까지 시계를 만들거나 한 것도 다

HTML에서 <span><div> 등의 태그들을 id 값과 class를 줌과 동시에 선언하여

JS에서 그 Element를 document.querySelector() 로 CSS 문법(id 는 '#',class 는 '.')으로 가져온 다음 Element. innerText  등으로 값을 수정하고 업데이트 하였다.

 

https://mswait.tistory.com/74

[JavaScript] 간단한 시계만들기 : setInterval(), setTimeout(), Date()

 

이번에는 직접 JS 에서 HTML을 태그(<div> <span>) 을 생성해서 HTML 에 추가까지 해보자.

바로

 

document.createElement("태그종류");

 

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

실행을 시켜보면 콘솔창에 img 태그가 보이는데 오른쪽 마우스 클릭 하고 최상단의 '요소 패널에서 보기' 를 클릭해보면

분명히 생성은 되었지만 현재 페이지에서 볼 수가 없다고 나온다.

태그가 존재하는 것은 분명하기에 여기에 

bgImage.src 와 같이 값을 할당해 줄 수가 있다.

const images = ["0.jpeg", "1.jpeg", "2.jpeg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];

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

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

console.log(bgImage);

콘솔창은?

이렇게 잘 나온다. 참고로 이렇게 img 폴더 안에 사진들이 들어가 있다.

 

JS에서 HTML element를 만들어 주었다. 아주 쉽게

document.createElement("")

 

 마지막으로 해줘야 하는 것은 html 의 body 내부에 이 bgImage 를 넣어줘야 한다는 것이다.

아직은 오직 JavaScript에만 존재하지 HTML 파일에 존재하는것이 아니기 때문이다.

 

document.body.appendChild() -> body 에 html을 추가하는 것이다.

const images = ["0.jpeg", "1.jpeg", "2.jpeg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];

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

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

document.body.appendChild(bgImage);