DOM Element 여러개 만들기

정말정말 오랜만에 DOM을 복습중이었다.

HTML에 DIV 태그를 넣는 아주 기본적인걸 하는 중이었고,

DIV태그를 여러개 넣고 싶었다.

그래서 아래처럼 작성했다.

const createDiv = document.createElement('div');
for (let i = 0; i < 3; i++) {
  document.body.appendChild(createDiv)
  createDiv.setAttribute('class', `${i}`)
}

하지만 위와 같이 작성하면 class가 ‘2’인 div태그가 하나만 생성된다.

아니 내가 뭘 잘못한거지 분명 뭔가 잊은게 있는거 같은데.. 하다가

어이 없게도 잘 생각해보니, div 생성 코드를 반복문 밖에 뒀기때문에 1개만 생성됐고,

반복문 안에서 생성된 그 div 태그 1개를 가지고 계속 class를 0, 1, 2 결국 2로 만든 것이다.

그렇다면

const createDiv = document.createElement('div');
for (let i = 0; i < 3; i++) {
  const createDiv = document.createElement('div');
  document.body.appendChild(createDiv)
  createDiv.setAttribute('class', `${i}`)
}

위와 같이 작성을 해줘야, div를 생성하고 body에 적용하고, class name을 적용하고 → 다시 반복 해서 여러개를 만들 수 있는것이다!! 바보..