HTML DOM innerText 속성 완벽 정리 – 문법, 예제, 출력 결과까지

HTML DOM의 innerText 속성은 HTML 요소의 내부 텍스트 콘텐츠를 읽어오거나(반환), 새로운 텍스트로 수정할 수 있게 해주는 속성입니다. 자바스크립트로 웹 페이지의 텍스트를 동적으로 변경할 때 가장 많이 사용되는 방법 중 하나입니다.

innerText 속성의 주요 특징

요소에 화면에 렌더링되는 텍스트만 반환합니다.
CSS 스타일을 인식하여, display:none으로 숨겨진 텍스트는 제외됩니다.
값을 할당하면 기존 텍스트가 새 텍스트로 대체됩니다.

문법(Syntax)

innerText 속성의 기본 문법은 다음과 같습니다.

1. 내부 텍스트 반환하기

object.innerText

2. 내부 텍스트 설정하기

object.innerText = "text"

예제

버튼을 클릭하면 초록색 박스 안의 텍스트가 바뀌는 간단한 예제를 통해 innerText 속성의 동작 방식을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
    }
    .box{
        background-color:#347924;
        width:100px;
        padding:10px;
        text-align:center;
        font-weight:bold;
        font-size:1.5rem;
        color:white;
        margin:1rem auto;
    }
</style>
</head>
<body>
<h1>innerText 속성 예제</h1>
<div class="box">
</div>
<button onclick="writeHi()">Write Hi</button>
<button onclick="writeHello()">Write Hello</button>
<script>
    function writeHi() {
        var outerBox = document.querySelector('.box');
        outerBox.innerText = 'HI';
    }
    function writeHello() {
        var outerBox = document.querySelector('.box');
        outerBox.innerText = 'HELLO';
    }
</script>
</body>
</html>

코드 설명

document.querySelector('.box') : 클래스명이 box인 요소를 선택합니다.
writeHi() 함수 : 박스의 innerText 값을 'HI'로 설정합니다.
writeHello() 함수 : 박스의 innerText 값을 'HELLO'로 설정합니다.
각 버튼에는 onclick 이벤트로 해당 함수가 연결되어 있습니다.

출력 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM innerText 속성 완벽 정리 – 문법, 예제, 출력 결과까지

"Write Hi" 또는 "Write Hello" 버튼을 클릭하면 초록색 박스의 내부 텍스트가 즉시 변경됩니다.

HTML DOM innerText 속성 완벽 정리 – 문법, 예제, 출력 결과까지

innerText vs textContent 차이점

innerText와 비슷한 역할을 하는 textContent 속성과의 차이도 알아두면 좋습니다.

구분	innerText	textContent
숨겨진 요소 처리	display:none인 텍스트 제외	숨겨진 텍스트도 포함
렌더링 반영	CSS 스타일 반영	스타일 미반영
성능	상대적으로 느림	더 빠름

화면에 보이는 텍스트 그대로 다루고 싶다면 innerText, 성능이 중요하거나 마크업 전체 텍스트를 다룰 때는 textContent를 사용하는 것이 좋습니다.