Create

document.createElement('div')
<div></div>

• 위와 같이 하게 되면 div 태그가 생성된다

const divTag = document.createElement('div')

변수에 담을수도 있다

Append

• 생성된 div태그를 body에 적용시키자

document.body.append(divTag)

Read

• 클래스가 tweet인 html을 불러오자

const oneTweet = document.querySelector('.tweet')

• 클래스가 tweet인 모든 html을 불러오자

const tweets = document.querySelectorAll('.tweet')

• 기존의 부모요소에 자식요소로 넣어보자

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

• querySelector 와 같은 getElementById 도 사용 가능하다

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

Update

• div 태그 안에 text를 넣어보자

console.log(divTag) // <div></div>
divTag.textContent = 'hello'
console.log(divTag) // <div>hello</div>

• div 태그에 class를 넣어보자

divTag.classList.add('tweet')
console.log(divTag) // <div class="tweet">hello</div>

Delete

• 태그를 지워보자

divTag.remove() 

• 자식 요소들을 모두 지워보자

document.querySelector('#container').innerHTML = '';