🐶 textContent, innerText, innerHTML의 차이점을 알아보자.
우리는 요소 안에 무언가를 집어넣을때 textContent, innerText, innerHTML을 종종 쓰곤 한다. 그런데 나는 세 개의 차이점을 잘 알지 못하고 썼다. 이번 기회로 보면서 정리하고 넘어가자.
✏️ textContent
- layout 발생 X
- 출력시 HTML 구문분석 O -> HTML태그를 제외하고 그 안의 content만 표시
- 스타일링 적용 X
- 삽입시 요소안에 단순 텍스트를 넣고 싶을 때 사용, 줄바꿈 적용 X
(CSS에 white-space: pre-line 추가할 것) - 노드에서 값을 읽어 올때 텍스트의 내용만, 문자열의 데이터만 읽어 오기 때문에 노드에 값을 저장하거나 태그를 입력하거나 등 한다면 그대로 문자열로 출력된다.
const hello = document.querySelector('.hello');
hello.textContent = '<h1>Hello</h1>';
// 출력결과
// <h1>Hello</h1>💡 그래서 단순히 문자열을 설정하고 읽어올때는 textContent를 쓰는 것이 좋다. 하지만, 만약 최상위의 부모컨테이너에서 textContent를 설정하는 순간, 그 안에 들어있는 모든 자식 요소들의 노드들이 삭제되니까 제일 말단의 텍스트나 인풋같은 요소들에게 쓰는 것이 좋다.
✏️ innerText
- layout 발생 O
- 출력시 HTML 구문분석 O -> HTML태그를 제외하고 그안의 Content만 표시
- 스타일링 적용 O
- 삽입시 HTML 적용안하고 태그 그대로 들어감, 줄바꿈 적용 O
- HTML 구문 분석을 하기 때문에 단순히 텍스트를 요소 안에 넣고 싶으면 textContent보다 성능이 떨어진다.
(IE8이하 버전을 지원하기 위해서 IE에 특화되어 개발된 API이므로 되도록 사용하지 않는 것이 좋다)
✏️ innerHTML
- layout 발생 O
- 출력시 HTML태그를 포함한 모든 내용을 반환
- 스타일 적용 X
- 삽입시 HTML 구문분석 O -> HTML태그를 제외하고, 그 안의 content만 표시 & 요소 내용 대체 (이전에 들어있던 내용 삭제)
- 일일이 createElement를 이용해 setAttribute를 하지 않고 간편하게 작성할 수 있지만, 계속 변경되어야 할 때는 DOM Tree와 Render Tree를 만들어야해서 좋지 않다. 이럴땐 textContent로 업데이트 하는 것이 효율적.
- 요소 안의 모든 태그들, 요소들을 문자열 형태로 읽어오고 저장할 수 있다. 가끔 동적 프로그래밍으로 여러 요소들을 제어할 때는 유용하게 쓸 수 있지만 보안문제가 있기 때문에 절대로 사용자에게 텍스트 인풋을 받아와서 설정하는 경우에는 innerHTML을 쓰지 않도록 한다. (가령 사용자가 텍스트 인풋을 받아와서 설정하는 경우 등) 왜냐하면 사용자 또는 해커가 악성 js코드가 포함된 HTML태그들을 넣을 수 있기 때문이다. 그러므로 단순히 그냥 텍스트 인풋을 받아오는 경우라면 textContent를 쓰자.
✏️ innerHTML 번외
ex)
<script>
const section = document.querySelector('section');
const h2 = document.createElement('h2');
h2.setAttribute('class','title');
h2.textContent = 'This is a title';
const h3 = document.querySelector('h3');
section.insertBefore(h2, h3);
</script>이렇게 코드를 작성하면 section태그 안에 class가 title이고 'This is a title'인 h2태그가 생성되고 h3태그 앞에 h2가 위치하게 된다.
(참고로 appendChild는 뒤에 추가 / insertBefore은 뒤에 입력하는 것 앞에 삽입되도록 추가)
또 다른 방법으로는
section.innerHTML = `
<img src='img/avatar.png' alt='avatar'>
<h1 class='introduction'>Name</h1>
<h2 class='title>This is a title</h2>
<h3 class='subtitle'>This is a subtitle</h3>
`이렇게도 추가할 수 있다. 그럼 둘의 차이는 무엇일까?
h2의 텍스트를 계속 변경해야하거나 추가해야하는 사항이 있다면 후자의 방법보다는 전자의 방법을 사용하는 것이 좋다. 왜냐하면 h2의 변경사항이 있을때마다 section 안의 내용 전체가 바뀌어야 하기 때문이다. 계속 DOM Tree가 만들어지고, Rander Tree돌 만들어져야 하므로 브라우저의 성능에 좋지 않다. 그러므로 요소의 변수를 가지고 있으면서 많은 동작을 해야한다면 전자의 방법을 쓰고, 한번 업데이트 하고 변경할 일이 없으면 후자의 방법을 쓰자.
출처
드림코딩아카데미 브라우저 101
