[HTML] DOM 으로 HTML 조작하기(1) - createElement, append, appendChild

 

🌈 DOM으로 HTML 조작하기  - createElement, append, appendChild

 

DOM 으로 HTML 을 조작하는 방법중 가장 기초적인 것은 element를 만드는 것이다.

document.createElement('div')

 

작업의 결과를 담기 위해선 변수를 선언하고 작업의 결과를 변수에 할당할 수도 있다.

const test = document.createElement('div')

 

변수를 선언하고 append 해주지 않으면 적용이 안되는데, 만들어진 변수를 사용하고 싶다면 아래와 같이 append 하면 된다.

document.body.append(test)

 

해당 변수에 textContent 라는 메소드를 활용하면 문자열도 입력할 수 있다.

test.textContent = "Hello"
document.createElement('div') = "Bye"

 

💡 실행결과