동적 요소 만들기

Dom 요소(객체) 추가

document.createElement() 를 사용해서 요소를 동적으로 추가합니다.
추가한 요소에는 필요한 스타일, 속성을 추가할 수 있습니다.

// 요소 생성
const newNode = document.createElement('div');

// id 속성을 추가합니다.
newNode.setAttribute("id", "NewDiv");

// 필요한 스타일을 추가합니다. innerHTML, innerText 도 사용가능합니다.
newNode.style.width = "300px";
newNode.style.height = "400px";
newNode.style.backgroundColor = "red";

동적 요소 트리에 삽입

위의 추가한 요소를 Dom 트리에 삽입해보자. 방법은 2가지가 있다.

첫 번째 방법은 Node.appendChild(new Node); 를 사용하여 Node 의 마지막 자식으로 삽입한다.
두 번째 방법은 Node.insertBefore(new Node, 기준 Node); 를 사용하여 기준 Node 앞에 삽입한다.
기준 Node 의 경우 null 을 입력하면 자동으로 끝에 삽입되고 입력하지 않을 시 오류가 발생합니다.

// 첫번째 방법
document.body.appendChild(newNode);
// 두번째 방법
document.body.insertBefore(newNode, null)

Dom 요소(객체) 삭제

Node.remove(); 를 사용하여 해당 Node 를 삭제할 수 있습니다.

// NewDiv id 를 가진 Dom 객체를 삭제합니다.
document.getElementById('NewDiv').remove();