JavaScript를 사용하여 Document Object Model(DOM)에 새로운 요소를 추가할 수 있습니다. 이를 통해 동적으로 웹 페이지를 조작하고 콘텐츠를 업데이트할 수 있습니다.

1. createElement를 사용하여 요소 만들기

document.createElement() 메서드를 사용하여 새로운 HTML 요소를 만들 수 있습니다. 예를 들어, 새로운 div 요소를 만들고 이를 변수에 할당할 수 있습니다.

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

2. 텍스트 노드 추가하기

새로 만든 요소에 텍스트를 추가하려면 createTextNode() 메서드를 사용하여 텍스트 노드를 만들고, appendChild() 메서드를 사용하여 요소에 추가합니다.

const newContent = document.createTextNode('새로운 내용');
newDiv.appendChild(newContent);

3. 요소를 문서에 추가하기

마지막으로, appendChild() 메서드를 사용하여 새로 만든 요소를 문서의 원하는 위치에 추가할 수 있습니다.

document.body.appendChild(newDiv);

이제 JavaScript를 사용하여 동적으로 요소를 추가하는 방법을 알았습니다. 웹 페이지를 개발할 때 이 기술을 사용하여 사용자와 상호작용하고 콘텐츠를 업데이트할 수 있습니다.

더 많은 자세한 내용은 MDN web docs를 확인하세요.