[JavaScript] DOM 요소 내용을 비우는 방법

element.innerHTML = ''를 사용하여 DOM 요소 내용을 비우는 방법과 관련한 예제를 자세히 설명하겠습니다.

예제 1: 요소 내용 비우기

// HTML에서 다음과 같은 요소가 있다고 가정합니다.
// <div id="myElement">내용</div>

// 요소를 선택합니다.
const element = document.getElementById('myElement');

// 요소 내용을 비웁니다.
element.innerHTML = '';

이 예제에서는 id가 'myElement'인 요소를 선택하고, element.innerHTML = ''를 사용하여 해당 요소의 내용을 비웁니다. 결과적으로 해당 요소의 내용이 빈 문자열로 설정됩니다.

예제 2: 버튼 클릭 시 요소 내용 비우기

// HTML에서 다음과 같은 요소와 버튼이 있다고 가정합니다.
// <div id="myElement">내용</div>
// <button id="clearButton">내용 지우기</button>

// 요소와 버튼을 선택합니다.
const element = document.getElementById('myElement');
const clearButton = document.getElementById('clearButton');

// 버튼을 클릭하면 요소 내용을 지웁니다.
clearButton.addEventListener('click', () => {
  element.innerHTML = '';
});

이 예제에서는 버튼을 클릭했을 때 요소 내용을 지우는 방법을 보여줍니다. 'clearButton' 버튼에 대한 클릭 이벤트 리스너를 추가하고, 클릭 시 element.innerHTML = ''를 사용하여 요소의 내용을 비웁니다.