네, 자바스크립트(JavaScript)를 사용하면 HTML 콘텐츠를 충분히 변경할 수 있습니다. 일반적으로 HTML 콘텐츠는 <p>, <span>과 같은 HTML 태그 안에 담겨 있는데, 자바스크립트에는 이러한 태그에 접근할 수 있는 DOM 메서드가 제공됩니다. document.getElementById(), document.getElementsByTagName() 등의 메서드를 활용하면 원하는 태그를 찾아내고, 그 안의 내용을 자유롭게 수정할 수 있습니다.
특히 요소의 내용을 바꿀 때 가장 많이 사용되는 것이 innerHTML 속성입니다. DOM 메서드로 특정 요소를 선택한 뒤 innerHTML에 새로운 값을 할당하면, 화면상의 텍스트가 즉시 변경됩니다.
예제 1: span 태그의 내용 변경하기
다음 예제에서는 자바스크립트 DOM 메서드인 document.getElementById()를 사용하여 span 태그의 내용을 변경합니다. 버튼을 클릭하면 onclick 이벤트 핸들러가 실행되면서 해당 요소의 innerHTML 값이 새로운 문장으로 교체됩니다.
<html>
<body>
<span id="change">Is javaScript is java.</span>
<input type = "button" value = "change"
onclick='document.getElementById("change").innerHTML = "No JavaScript is not java!"'>
</body>
</html>위 코드를 실행하면 화면에 다음과 같이 표시됩니다.
여기서 'change' 버튼을 클릭하면 아래와 같은 결과를 얻을 수 있습니다.
출력 결과
예제 2: p 태그의 내용 변경하기
다음 예제에서는 같은 방식으로 자바스크립트 DOM 메서드를 사용하여 단락(p) 태그의 내용을 변경합니다. id 속성으로 대상 요소를 지정하고, 버튼 클릭 시 innerHTML 값을 다른 문자열로 바꾸는 구조입니다.
<html>
<body>
<p id="change">Elon musk has failed 3 times</p>
<input type = "button" value = "change"
onclick='document.getElementById("change").innerHTML = "Elon musk has succeded in his fourth attempt"'>
</body>
</html>위 코드를 실행하면 화면에 다음과 같이 나타납니다.
'change' 버튼을 클릭하면 아래와 같은 출력 결과를 확인할 수 있습니다.
출력 결과
정리
이처럼 자바스크립트의 DOM 메서드와 innerHTML 속성만 활용하면 별도의 라이브러리 없이도 HTML 콘텐츠를 동적으로 변경할 수 있습니다. getElementById() 외에도 querySelector(), getElementsByClassName() 등 다양한 요소 선택 메서드가 있으므로, 상황에 맞게 활용하면 더욱 유연한 웹 페이지를 만들 수 있습니다.