자바스크립트로 텍스트를 바꾸는 방법 3가지 - textContent, innerText, innerHTML

자바스크립트로 텍스트 내용을 바꾸는 방법

자바스크립트로 텍스트를 바꿀때 개인적으로 가장 선호하는 방법은 textContent입니다. 왜 그런지는 조금 뒤에 이야기하고 일단, textContent로 내용을 어떻게 바꾸는지 실제 예시를 먼저 보겠습니다.

textContent

text라는 아이디를 가진 div 의 텍스트를 바꾸는 예시를 보겠습니다.

HTML

<div id="text">Hello World</div>

JAVASCRIPT

// text라는 아이디를 가진 element를 content라는 변수에 담는다
const content = document.getElementById('text')

/**
  * content에 담겨있는 <div id="text">Hello World</div>의 내용 변경
  */
content.textContent = '<span style="color:red;">  안녕하세요</span>'

결과

여기서 눈 여겨볼 점은 span 태그로 한 번 감싸서 내용을 변경 했다는 점이고, '안녕하세요'라는 문장 앞에 스페이스로 공백을 넣어줬다는 점입니다.

출력된 결과를 보면 span태그가 그대로 문자열로 출력되고, ' 안녕하세요' 앞에 공백이 표시된 것을 알 수 있습니다.

innerText

이번에는 innerText를 활용한 방법입니다.
innerText 방법은 똑같습니다.

HTML

<div id="inner">Hello World</div>

JAVASCRIPT

// inner라는 아이디를 가진 element를 inner 변수에 담는다
const inner = document.getElementById('inner')

/**
  * inner 변수에 담겨있는 <div id="inner">Hello World</div>의 내용 변경
  */
inner.innerText = '<span style="color:red;">이것은  innerText로 바꾼 내용입니다</span>'

결과

이것도 마찬가지로 span태그로 감싸주고 있습니다. 역시 span 태그는 작동하지 않고, 그냥 문자열로 출력됩니다.

'이것은 innerText로 바꾼 내용입니다' 라는 내용 앞에 공백을 넣어줬는데, 이번에는 공백을 무시하고 있다는 점을 알 수 있습니다.

innerHTML

이번에는 innerText를 활용한 방법입니다.
innerText 방법은 똑같습니다.

HTML

<div id="html">Hello World</div>

JAVASCRIPT

// html 아이디를 가진 element를 html 변수에 담는다
const html = document.getElementById('html')

/**
  * html 변수에 담겨있는 <div id="html">Hello World</div>의 본문 내용 교체
  */
html.innerHTML = '<span style="color:red;">  이것은 innerHTML로 바꾼 내용입니다</span>'

결과

이번에는 앞의 textContent, innerText와 다르게 span 태그가 제대로 작동합니다. span 태그에 입력한 style 속성도 작동하기때문에, 글자가 빨간색으로 출력되고 있습니다.

이처럼 innerHTML은 태그를 만들어서 삽입할 수 있다는 것이 가장 큰 특징입니다. 하지만 역시 공백문자를 무시하고 있다는 점을 알 수 있습니다.

textContent를 사용해야하는 이유

innerText보다 추천하고 싶은 이유

textContent의 가장 큰 특징은 내부의 모든 콘텐츠를 가져온다는 점입니다. innerText의 경우엔 사람이 읽을 수 있는 - 가시적으로 보이는 것만 가져오는 특징이 있습니다.

그 과정에서 CSS도 고려하기때문에 innerText로 수정하게 되면 리플로우가 발생합니다.

리플로우가 발생하면 리페인트도 같이 따라 발생하게 됩니다.

결국 레이아웃을 다시 그려내는 과정이 생긴다는 의미입니다.
그래서 innerText를 사용하면 화면에 요소가 많을 수록 느려질 수 있습니다.

innerHTML보다 추천하고 싶은 이유

textContent는 있는 그대로 텍스트를 그려내려는 속성이 있습니다. 그래서 태그를 해석해서 그려주는 innerHTML과 비교해봤을때, textContent는 XSS 공격을 막을 수 있어서 보안면에서도 더 우수합니다.

퍼포먼스면에서는 innerText보다 우수하고, 보안면에서는 innerHTML보다 우수하니 안 쓸 이유가 없습니다.

예시

위에 설명된 내용들은 아래 코드펜 소스를 통해서 확인할 수 있습니다.