innerHTML은 JavaScript에서 HTML 요소의 내부 콘텐츠(텍스트와 HTML 태그 모두)를 읽거나 수정할 때 사용하는 대표적인 DOM 속성입니다. 이 속성을 활용하면 웹 페이지를 새로고침하지 않고도 동적으로 화면의 내용을 변경할 수 있습니다.
innerHTML 설정 문법
innerHTML을 설정하는 올바른 문법은 다음과 같습니다.
document.getElementById("yourIdName").innerHTML="yourValue";
각 부분의 역할은 아래와 같습니다.
document.getElementById(): 지정한 ID를 가진 HTML 요소를 문서에서 찾아 반환합니다.innerHTML: 해당 요소의 내부 HTML 콘텐츠에 접근합니다.yourValue: 요소 안에 삽입할 텍스트 또는 HTML 문자열입니다.
예제 코드
이제 실제 예제를 통해 innerHTML을 설정하는 방법을 살펴보겠습니다. 아래 코드는 페이지가 로드되면 특정 요소에 안내 문구를 삽입하는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<label>
Username:<input type="text" />
</label>
<p id="test"></p>
<script>
document.getElementById('test').innerHTML = 'Enter Some value into the text box';
</script>
</body>
</html>
위 코드에서는 <p id="test"> 요소를 선택한 후, innerHTML 속성에 문자열을 대입하여 해당 위치에 안내 메시지가 표시되도록 했습니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하세요. Live Server 확장 프로그램이 설치되어 있다면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
참고: innerHTML 사용 시 주의사항
innerHTML은 HTML 태그까지 함께 삽입할 수 있다는 장점이 있지만, 사용자 입력값을 그대로 넣으면 XSS(교차 사이트 스크립팅) 공격에 노출될 수 있습니다. 단순히 텍스트만 다룰 경우에는 보안상 더 안전한 textContent 속성을 사용하는 것이 좋습니다.