HTML DOM의 innerHTML 속성은 요소(element) 내부의 HTML 콘텐츠를 읽어오거나 수정할 수 있게 해주는 강력한 기능입니다. 여기서 말하는 '내부 HTML(inner HTML)'이란 해당 요소 안에 포함된 텍스트와 중첩된 HTML 태그 전체를 의미합니다.
innerHTML을 활용하면 자바스크립트만으로 페이지의 특정 영역을 동적으로 변경할 수 있어, 버튼 클릭에 반응하는 인터랙티브한 웹 페이지를 쉽게 만들 수 있습니다.
문법(Syntax)
innerHTML 속성의 기본 문법은 다음과 같습니다.
1. innerHTML 값 가져오기(읽기)
object.innerHTML
2. innerHTML 값 설정하기(쓰기)
object.innerHTML = "value"
여기서 value는 일반 텍스트뿐만 아니라 중첩된 HTML 요소도 포함할 수 있습니다. 즉, 문자열 형태로 작성된 태그가 실제 HTML 요소로 렌더링됩니다.
예제(Example)
아래 예제는 innerHTML 속성을 사용해 초록색 박스 안의 내용을 버튼 클릭에 따라 사각형 또는 원으로 바꾸는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.outer-box{
background-color:#347924;
width:200px;
height:200px;
padding:10px;
text-align:center;
font-weight:bold;
color:white;
margin:1rem auto;
}
.inner-box{
width:100px;
height:100px;
margin:3rem auto;
background-color:#8dce79;
}
.inner-circle{
width:100px;
height:100px;
border-radius:50%;
background-color:#8dce79;
margin:3rem auto;
}
</style>
</head>
<body>
<h1>innerHTML property Example</h1>
<div class="outer-box">
</div>
<button onclick="getsquare()">Get Square</button>
<button onclick="getcircle()">Get Circle</button>
<script>
function getsquare() {
var outerBox = document.querySelector('.outer-box');
outerBox.innerHTML ='<div class="inner-box">square</div>';
}
function getcircle() {
var outerBox = document.querySelector('.outer-box');
outerBox.innerHTML ='<div class="inner-circle">circle</div>';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
초기 상태에서는 빈 초록색 박스와 두 개의 버튼이 표시됩니다. Get Square 버튼을 클릭하면 innerHTML 속성이 새로운 div 요소로 교체되면서 초록색 박스 안에 사각형이 나타납니다.
이번에는 Get Circle 버튼을 클릭해 보세요. innerHTML이 원 모양의 div 요소로 다시 설정되어, 초록색 박스 안의 내용이 원으로 바뀌는 것을 확인할 수 있습니다.
정리
이처럼 innerHTML 속성은 요소의 내부 콘텐츠를 손쉽게 교체할 수 있는 방법을 제공합니다. 다만, 사용자 입력값을 그대로 삽입할 경우 XSS(교차 사이트 스크립팅) 공격에 노출될 수 있으므로, 신뢰할 수 없는 데이터는 반드시 검증한 후 사용하는 것이 좋습니다.