[javascript] DOM 동적으로 HTML 삽입하기

12 Dec 2023

웹 페이지에서 DOM (Document Object Model)을 사용하여 동적으로 HTML을 삽입할 수 있습니다. 이것은 JavaScript를 사용하여 웹 페이지를 동적으로 변경하고 업데이트하는 데 유용합니다.

document.createElement() 메서드

document.createElement() 메서드를 사용하여 새로운 HTML 요소를 생성할 수 있습니다. 이 메서드는 새로운 요소의 태그 이름을 전달하여 호출됩니다.

예를 들어, 새로운 div 요소를 만드는 방법은 다음과 같습니다:

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

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

innerHTML을 사용할 때:

newDiv.innerHTML = '새로운 내용';

innerText를 사용할 때:

newDiv.innerText = '새로운 내용';

appendChild() 메서드를 사용하여 새로 생성된 요소를 다른 요소의 자식으로 추가할 수 있습니다.

예를 들어, body 요소에 새로운 div를 추가하는 방법은 다음과 같습니다:

document.body.appendChild(newDiv);

이러한 메서드를 사용하여, JavaScript를 사용하여 동적으로 HTML을 생성하고 삽입할 수 있습니다.

이것은 동적으로 생성된 요소를 추가하여 웹 페이지의 사용자 상호작용을 향상시키는 데 사용될 수 있습니다.