[JavaScript] class가 있는 docment.createElement()를 사용하기

문제

본문 : class가 있는 document.createElement('div') 사용 [duplicate]

이 질문에 대한 답변은 이미 아래 링크에 있습니다.
JavaScript에서 DOM 요소에 class를 어떻게 추가할 수 있습니까?

전 다음과 같이 JavaScript를 통해 HTML 요소를 생성하기 위하여 createElement()를 사용할 수 있습니다.

let div = document.createElement('div');

하지만 CSS class를 새로 만들어진 div에 추가하려면 어떻게 해야 하나요?

저는 아래와 같이 시도했지만 동작하지 않았습니다.

let div = document.createElement('div class=myDiv');

저는 HTML을 바꿀 수 없고, JS만 수정할 수 있습니다. 미리 감사합니다!!

해결

Element.classList.add 사용

let div = document.createElement('div');
div.classList.add('test');
let text = document.createTextNode('Test');
div.appendChild(text);
document.body.appendChild(div)

.test {
  color: green;
}

 

className 사용

let div = document.createElement('div');
div.className = 'test';
let text = document.createTextNode('Test');
div.appendChild(text);
document.body.appendChild(div)

.test {
  color: red;
}