JS) 요소 추가하기

https://developer.mozilla.org/ko/docs/Web/API/Document/createElement
https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild

https://ko.javascript.info/modifying-document

🔍요소 만들고 추가하기

DOM 노드를 만들때 사용하는 메서드로는
1) document.createElement(tag)
2) document.createTextNode(text)
이렇게 두 가지가 있다.

1) document.createElement(tag)를 활용하여
메시지가 들어갈 div는 세 단계를 거쳐 만들 수 있다.

// 1. <div> 요소 만들기
let div = document.createElement('div');

// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";

// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

하지만 이렇게 만들어져 있는 요소는 아직 변수 div에 불과하기 때문에 페이지에서 보이지 않는다.
따라서, div를 페이지에서 보이게 하기 위해 append()를 사용하여 삽입해주어야 한다.

document.body.append(div);

이미지 태그 추가해보기

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

//img의 위치 알려주기
image.src = "img/.jpg";
//or
image.src = "https://~~~";

//페이지에 보이게 하기위한 append
document.body.appendChild(image);