[JavaScript] innerHTML, innerText, textContent 차이점

 

 

---

목차

 

1. innerHTML

2. innerText

3. textContent

4. 정리

---

 

 

매번 찾아보는 셋의 차이점..

텍스트를 읽어오고 설정할 수 있다는 점이 비슷하지만 조금씩 다른 차이가 있어서 이 차이를 아는게 중요하다.

 

1. innerHTML

---

먼저 innerHTML은 'Element'의 속성으로, 해당 Element의 HTML,  XML 마크업을 읽어오거나 설정 할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다.

// html 코드와 함께 작성 가능
document.documentElement.innerHTML = "<p>innerHTML</p>"
// 스타일 적용
document.documentElement.innerHTML = 
  "<span style='color:blue'>innerHTML</span>"

// 이런 식으로 빈 문자열을 넣으면 body의 전체 내용을 지울 수 있다.
document.body.innerHTML = "";

 

 

*innerHTML의 위험성에 대해 다룬 글이다.

innerHTML을 대신해서 쓸 수 있는 메소드인 insertAdjacentHTML도 다루고 있으니 참고하면 좋을 것 같다.

 

https://codingtoddlerr.tistory.com/44

 

 

 

2. innerText

---

반면 innerText는 'Element'의 속성으로, 해당  Element 내에서 사용자에게 보여지는 text값들을 읽어온다.

// innerHTML과 달리 text값만 다루기 때문에 html태그 사용 불가능
document.documentElement.innerText = "innerText"

// html태그를 넣으면 태그도 text값으로 인식하고 
// <p>innerText</p> 문자열 그대로 적용함.
document.documentElement.innerText = "<p>innerText</p>"

 

 

다음은 innerHTML과 innerText를 비교한 예제이다.

const innerT = document.getElementById('innerT');
innerT.innerText = "<div style='color:red'>innerText</div>";
console.log(innerT)
// 스타일 적용되지 않은 기본 폰트로 <div style='color:red'>innerText</div> 출력

const innerH = document.getElementById('innerH');
innerH.innerHTML = "<div style='color:red'>innerHTML</div>";
console.log(innerH)
// 스타일 적용된 빨간색 폰트로 innerHTML 출력

 

 

다른 예제이다.

<div id='my_div'>
  안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>

<input type='button'
       value='innerText'
       onclick='getInnerText()'/>

function getInnerText() {
  const element = document.getElementById('my_div');
  alert(element.innerText);
}

 

이 예제에서 div안에는 '안녕하세요?    만나서 반가워요'가 입력되어 있지만 브라우저가 사용자에게 이 내용을 보여줄 때는 연속되는 공백은 무시하고 하나의 공백만 처리하여 '안녕하세요? 만나서 반가워요.'라고 보여진다.

 

 

 

3. textContent

---

textContent는 'Node'의 속성으로, 사용자에게 보여지는 text값만 읽어오는 innetText와는 달리 <script>나 <style> 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.

 

앞서 봤던 innerText의 예제와 다르게 '안녕하세요?    만나서 반가워요.'의 연속된 공백이 그대로 표현된다.

또한 'display:none' 스타일이 적용된 '숨겨진 텍스트' 문자열도 그대로 출력된다.

 

아래 예제를 통해 display:none으로 숨겨진 텍스트를 어떻게 가져오는지 innerHTML, innerText, textContent 각 속성들의 차이점을 살펴보자.

 

- html

<div id='content'>
  안녕~ 
  <span style='display:none'>innerText는 나를 볼 수 없어😏</span>
</div>

 

 script

const content = document.getElementById('content');

console.log(content.innerHTML);
// html 전체를 다 가져옴

// 안녕~ 
// <span style='display:none'>innerText는 나를 볼 수 없어😏</span>

-----------------------------------------------------
  
console.log(content.innerText);
// 사용자에게 보여지는 텍스트만 가져옴
// 숨겨진 텍스트는 사용자에게 보여지지 않기 때문에 안녕~만 가져옴

// 안녕~

-----------------------------------------------------
  
console.log(content.textContent);
// 숨겨진 텍스트까지 포함해서 텍스트값을 모두 다 가져옴

// 안녕~
// innerText는 나를 볼 수 없어😏

 

 

 

정리

---

- innerHTML은 요소 내에 있는 HTML과 XML 모두를 의미하고
- innerText는 요소 내에서 사용자에게 보여지는 text를 의미하고
- textContent는 script나 style 태그와 상관없이 해당 노드가 가지고 있는 text를 의미한다.