[javascript] 동적 HTML 생성

07 Dec 2023

자바스크립트(Javascript)를 사용하여 동적으로 HTML 요소를 생성하는 방법을 알아보겠습니다.

createElement 메서드

HTML 요소를 동적으로 생성하기 위해 createElement 메서드를 사용할 수 있습니다. 이 메서드는 새로운 HTML 요소를 생성하고 반환합니다. 생성된 요소에는 태그 이름을 인수로 전달해야 합니다.

const newElement = document.createElement(tagName);

예를 들어, 새로운 <div> 요소를 생성하려면 다음과 같이 작성할 수 있습니다.

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

innerHTML 속성을 사용하면 HTML 요소의 내부 콘텐츠를 동적으로 설정할 수 있습니다. 이 속성에 문자열 형태의 HTML 코드를 할당하여 내부 콘텐츠를 추가할 수 있습니다.

element.innerHTML = htmlString;

예를 들어, 생성한 <div> 요소의 내부 콘텐츠를 설정하려면 다음과 같이 작성할 수 있습니다.

newDiv.innerHTML = '<h1>Hello, World!</h1>';

위의 코드는 <div> 요소 내에 <h1> 요소를 동적으로 추가합니다.

부모 요소에 자식 요소를 추가하기 위해 appendChild 메서드를 사용할 수 있습니다. 이 메서드는 부모 요소에 자식 요소를 추가하고 반환합니다. 추가할 자식 요소를 인수로 전달합니다.

parentElement.appendChild(childElement);

예를 들어, <body> 요소에 우리가 생성한 <div> 요소를 추가하려면 다음과 같이 작성할 수 있습니다.

document.body.appendChild(newDiv);

위의 코드는 생성한 <div> 요소를 <body> 요소에 추가합니다.

다음은 위에서 설명한 개념들을 사용하여 동적으로 HTML 요소를 생성하는 예제 코드입니다.

const newDiv = document.createElement('div');
newDiv.innerHTML = '<h1>Hello, World!</h1>';
document.body.appendChild(newDiv);

위의 코드는 <div> 요소를 생성하고, 내부 콘텐츠로 <h1> 태그를 추가한 후 <body> 요소에 추가합니다.

이제 자바스크립트를 사용하여 동적으로 HTML을 생성하는 방법에 대해 알게 되었습니다. 이러한 기능을 활용하여 웹 애플리케이션의 사용자 인터페이스를 간단하게 구성할 수 있습니다.