HTML구조를 DOM을 이용해 만들기

결과물

<div class="tweet">
  <div class="username">김코딩</div>
<div>```

```js
let elTweet = document.createElement('div') //<div></div>부모
elTweet.classList.add('tweet') //<div class="tweet"></div>

//김코딩div만들기
let elUsername = document.createElement('div') //<div></div>자식
elUsername.classList.add('username') // <div class="username"></div>
elUsername.textContent = '김코딩'


elTweet.appendChild(elUsername) // 부모에 자식 붙이기
document.body.appendChild(elTweet) //body에 부모 붙이기
document.body.append(elTweet) //body에 부모 붙이기

추가

append vs appendChild

같은 기능: 둘다 부모의 자식객체의 마지막에 붙는다
다른기능
-appendChild는 '안녕' 못붙이고, 노드 하나만 추가 가능
-append는 '안녕' 붙일 수 있다. 노드 여러개 추가 가능