innerHTML, innerText, textContent

태그 안의 내용에 접근하는 사용하는 속성은 innerHTML, innerText, textContent가 있다.

 

See the Pen Load innerText/textContent by ImHyeLim1209 (@imhyelim1209) on CodePen.

 

1. innerHTML

  innerHTML은 태그를 포함한 내용이다. 태그를 포함한 내용을 가져오거나 아래와 같이 태그가 포함된 내용으로 바꿀 때 사용한다. textContent에 비해 느리고 보안 위협이 있다.

$0.innerHTML = '<a href = "https://naver.com">link</a>'

 

2. innerText

  렌더링된 텍스트를 보여준다. 즉, 태그가 제외된 문자열만 보여준다. <br>태그는 인식되며, 숨겨진 요소(display:none)는 보여주지 않는다. 잘 사용하지 않는 속성이다.

 

3. textContent

  실제 코드의 줄바꿈을 포함한 텍스트를 그대로 보여준다. 따라서 <br>태그가 인식되지 않으며 숨겨진 요소의 내용도 보여준다. textContent를 이용하여 내용을 바꿀 때 태그를 넣을 수 없다.(태그를 넣으면 문자열로 입력된다.)

 

 

---

참고 사이트

developer.mozilla.org/ko/docs/Web/API/Node/innerText

Node.innerText - Web API | MDN