티스토리 뷰
목차
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를 의미한다.
'Language > JavaScript' 카테고리의 다른 글
[Vite] Vite란? (2) | 2024.09.10 |
---|---|
[JavaScript] 고차 함수와 콜백 함수 (0) | 2024.03.30 |
[JavaScript] Rest parameter와 Arguments의 차이 (0) | 2024.03.25 |
[JavaScript] 요소의 속성을 설정하는 방법: setAttribute() (0) | 2024.03.23 |
[JavaScript] 요소의 속성 값을 가져오는 방법: getAttribute() (0) | 2024.03.23 |
- Total
- Today
- Yesterday
- 객체
- 제어 컴포넌트
- 리액트
- tanstackquery
- js
- Next.js
- 코드잇 스프린트
- javascript
- innerhtml
- 유사배열객체
- 비제어 컴포넌트
- 스프린트프론트엔드6기
- Git
- GitHub
- html
- currentTarget
- Target
- 배열
- rest parameter
- 코드잇스프린트
- CSS
- react
- hydrationboundary
- 프론트엔드
- arguments
- 동기
- 취업까지달린다
- map
- 중급 프로젝트
- 비동기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |