JavaScript로 DOM을 조작하다 보면 요소의 내용을 가져오거나 변경할 때 innerHTML과 innerText 중 어떤 것을 사용해야 할지 고민하게 됩니다. 두 속성은 이름은 비슷하지만 동작 방식이 완전히 다르므로, 차이를 정확히 이해하는 것이 중요합니다.
innerHTML이란?
innerHTML 속성은 요소 내부의 텍스트뿐만 아니라 모든 공백과 하위 HTML 태그까지 그대로 반환합니다. 즉, 원본 마크업의 형식을 완전히 보존하며 <b>, <i> 등의 태그도 문자열에 포함됩니다.
예를 들어 Hello <b>World</b>라는 요소에 innerHTML을 사용하면 태그까지 포함된 Hello <b>World</b> 문자열이 반환됩니다.
innerText란?
innerText 속성은 반대로 태그와 불필요한 공백을 모두 제거하고 사람이 화면에서 실제로 보는 순수 텍스트만 반환합니다. 브라우저에 실제로 렌더링된 결과를 반영하기 때문에 CSS 스타일(예: display:none으로 숨겨진 요소)의 영향을 받기도 합니다.
예제 코드
아래 예제는 버튼을 클릭했을 때 동일한 요소에 대해 innerHTML과 innerText가 각각 어떤 값을 반환하는지 보여줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>innerHTML vs innerText</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>innerHTML vs innerText</h1>
<div class="sample">Hello <b>World</b> <i>Some Text</i></div>
<div class="result">innerHTML =</div>
<div class="result">innerText =</div>
<button class="Btn">여기를 클릭하세요</button>
<h3>위 버튼을 클릭하면 해당 문단의 innerText와 innerHTML 결과를 확인할 수 있습니다.</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelectorAll(".result");
let sampleEle = document.querySelector(".sample");
let a;
BtnEle.addEventListener("click", () => {
resEle[0].innerHTML += sampleEle.innerHTML;
resEle[1].innerHTML += sampleEle.innerText;
});
</script>
</body>
</html>
실행 결과
'여기를 클릭하세요' 버튼을 누르면 아래와 같이 결과가 표시됩니다.
결과 분석
- innerHTML 결과:
Hello <b>World</b> <i>Some Text</i>— 굵게()와 기울임() 태그가 그대로 포함되어 출력되며, 결과 영역에서도 실제로 굵은 글씨와 기울임꼴로 렌더링됩니다. - innerText 결과:
Hello World Some Text— 모든 태그가 제거되고 텍스트만 일렬로 표시됩니다.
정리: 언제 무엇을 사용할까?
| 구분 | innerHTML | innerText |
|---|---|---|
| 반환 값 | 태그를 포함한 전체 HTML | 태그 없이 순수 텍스트만 |
| 공백 처리 | 원본 공백 그대로 유지 | 불필요한 공백 제거 |
| CSS 영향 | 영향 없음 | 숨겨진 요소 등 렌더링 상태 반영 |
| 주요 용도 | 마크업 삽입·복제 | 사용자에게 보이는 텍스트 추출 |
HTML 구조 자체를 가져오거나 동적으로 마크업을 삽입할 때는 innerHTML을, 화면에 표시되는 텍스트만 필요할 때는 innerText를 사용하는 것이 좋습니다. 다만 innerHTML에 외부 입력값을 그대로 삽입하면 XSS(교차 사이트 스크립팅) 취약점이 발생할 수 있으므로, 신뢰할 수 없는 데이터에는 textContent나 innerText 사용을 권장합니다.