JavaScript를 사용하여 Div 콘텐츠를 동적으로 수정

JavaScript를 사용하여 div 요소의 콘텐츠를 변경하는 것은 직관적인 접근 방식으로 수행할 수 있습니다. 다음 HTML 코드 조각은 예제로 사용됩니다.

이 예의 목표는 사용자가 값이 "A" 또는 "B"인 라디오 버튼을 선택한 것에 따라 div#content의 내부 HTML 콘텐츠를 수정하는 것입니다. 그러나 div 요소에는 이 작업을 용이하게 하는 JavaScript 속성 "값"이 부족합니다.

이 문제를 해결하기 위해 JavaScript는 HTML 요소의 innerHTML 속성을 활용하여 간단한 솔루션을 제공합니다. 다음 코드를 구현하면:

document.getElementById("content").innerHTML = "whatever";

changeDivContent() 함수 내에서 다음의 내용을 동적으로 설정할 수 있습니다. div#content를 원하는 값으로 바꿉니다. 이를 통해 JavaScript 코드 내의 사용자 입력 또는 기타 동적 조건을 기반으로 div 요소의 콘텐츠를 원활하게 업데이트할 수 있습니다.