JavaScript로 동적으로 HTML 요소 만들기 💻

웹 개발을 배우는 여정에서 JavaScript는 웹 페이지를 생동감 있게 만드는 데 필수적인 도구입니다. 오늘은 JavaScript를 사용하여 HTML 요소를 동적으로 생성하는 방법에 대해 배워보겠습니다. 이 기술은 웹 페이지에 사용자 상호작용에 따라 새로운 정보를 표시하거나, 리스트를 업데이트하고, 심지어 사용자 입력에 따라 새로운 폼 요소를 추가하는 등 다양한 방법으로 활용될 수 있습니다.

기본적인 HTML 요소 생성하기

JavaScript를 사용하여 HTML 요소를 만드는 것은 생각보다 간단합니다. 아래의 예제를 보면서 기본적인 방법을 배워봅시다.

// 새로운 div 요소를 생성합니다.
const newDiv = document.createElement('div');

// div에 텍스트를 추가합니다.
const newContent = document.createTextNode('안녕하세요, JavaScript로 만들어진 새 div입니다!');

// 텍스트 노드를 div에 추가합니다.
newDiv.appendChild(newContent);

// 생성된 div를 body 태그에 추가합니다.
document.body.appendChild(newDiv);

위 코드는 새로운 div 요소를 생성하고, 그 안에 텍스트를 추가한 다음, 이 div를 문서의 body에 추가합니다. 이렇게 간단한 몇 단계로 웹 페이지에 새로운 요소를 추가할 수 있습니다.

요소에 스타일 추가하기

동적으로 생성된 요소에 스타일을 추가하는 것도 중요합니다. JavaScript를 사용하여 CSS 스타일을 직접 적용해 보겠습니다.

// 스타일을 추가합니다.
newDiv.style.backgroundColor = 'lightblue';
newDiv.style.padding = '20px';
newDiv.style.borderRadius = '5px';
newDiv.style.marginTop = '10px';
newDiv.style.color = 'darkblue';
newDiv.style.fontFamily = 'Arial, sans-serif';

위 코드는 newDiv에 배경색, 패딩, 테두리 둥근 모서리, 상단 여백, 글자 색상, 글꼴을 설정합니다. 이렇게 JavaScript를 사용하여 요소의 스타일을 동적으로 조정할 수 있습니다.

이벤트 리스너 추가하기

웹 페이지에 동적 요소를 추가하는 것뿐만 아니라, 사용자와의 상호작용을 위해 이벤트 리스너도 추가할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하면 새로운 요소가 생성되도록 해봅시다.

// 버튼 요소를 생성합니다.
const button = document.createElement('button');
button.textContent = '클릭하여 새 div 생성';

// 버튼에 클릭 이벤트 리스너를 추가합니다.
button.addEventListener('click', function() {
  const newDiv = document.createElement('div');
  newDiv.textContent = '새로운 div가 생성되었습니다!';
  newDiv.style.backgroundColor = 'lightgreen';
  document.body.appendChild(newDiv);
});

// 버튼을 body에 추가합니다.
document.body.appendChild(button);

이 코드는 사용자가 버튼을 클릭할 때마다 새로운 div를 생성하고, 페이지에 추가합니다. 이벤트 리스너를 사용하여 웹 페이지의 상호작용성을 높일 수 있습니다.

JavaScript를 사용하여 동적으로 HTML 요소를 생성하고 조작하는 방법을 배웠습니다. 이 기술을 활용하여 사용자 경험을 향상시키고, 보다 동적이고 상호작용적인 웹 페이지를 만들어 보세요. Happy coding! 🚀