웹 개발에서 동적으로 DOM 요소를 생성하는 것은 매우 중요합니다. 자바스크립트를 사용하여 DOM 요소를 생성하고 조작하는 방법을 살펴보겠습니다.

1. createElement를 사용하여 요소 생성하기

createElement 메서드를 사용하여 새로운 요소를 만들 수 있습니다.

예를 들어, 새로운 div 요소를 생성하려면 다음과 같이 합니다:

const newDiv = document.createElement('div');

2. 요소에 속성 추가하기

setAttribute 메서드를 사용하여 요소에 속성을 추가할 수 있습니다.

예를 들어, id 속성을 추가하려면 다음과 같이 합니다:

newDiv.setAttribute('id', 'newDivId');

3. 요소에 텍스트 추가하기

innerText 또는 innerHTML 속성을 사용하여 요소에 텍스트를 추가할 수 있습니다.

예를 들어, 다음과 같이 텍스트를 추가할 수 있습니다:

newDiv.innerText = '새로운 DIV 요소입니다.';

4. 문서에 요소 추가하기

appendChild 메서드를 사용하여 새로 생성한 요소를 문서에 추가할 수 있습니다.

예를 들어, 다음과 같이 body에 새로운 div 요소를 추가할 수 있습니다:

document.body.appendChild(newDiv);

이제 자바스크립트로 DOM 요소를 생성하는 방법에 대해 알아보았습니다. 동적으로 생성된 요소를 사용하여 웹 페이지를 더욱 풍부하게 만들 수 있습니다!

더 많은 정보는 MDN web docs에서 확인할 수 있습니다.