TIL - innerHTML / innerText / textContent

Naakite·2022년 1월 31일

📁JavaScript

목록 보기

5/7

📄 javascript 를 알게된지, 벌써 2주라는 시간이 흘렀는데요, 2주 동안 예제를 보면서 innerHTML, innerText, textContent를 한번씩은 써본 것 같습니다. 그때는 차이점에 대해 알아보려 했지만, 어쩌다 보니..제목만 적어놓고 임시저장 한 이 글을 마무리 할까 합니다.

그럼 이번 포스팅의 주제는 innerHTML, innerText, textContent의 차이점에 대해서 정리해보겠습니다.

innerHTML : HTML 을 반환.
innerText : 사람이 읽을 수 있는 요소만 반환.
textContent: script 와 style 요소를 포함한 모든 요소의 콘텐츠를 반환.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>example</title>
</head>
<body>
    <div id="example">Hello <span>world!</span></div>
</body>
<script>
  const text = document.getElementById('example');
  /*
  alert(test.innerHTML); // Hello <span>world!</span>
  alert(text.innertext); // Hello world!
  alert(text.textContent); //Hello world!
*/
</script>
</html>

<body>
    <div id="example"></div>
</body>
<script>
  const test = document.getElementById('example');
  test.innerHTML = "<div style = 'color:red'>test</div>" 
</script>
</html>

결과

<script>
  const test = document.getElementById('example');
  test.innerText = "<div style = 'color:red'>test</div>"
  // textContent 도 innerText 와 결과가 같다.
</script>

결과

위의 결과만 보더라도, innerHTML 은 다른 것들과 달리 HTML 을 반환하고 있는 것을 볼수있다.

✅ 그럼 innerText와 textContent 의 차이점은 무엇일까?

innerText는 CSS에 순종적인데, 예를 들어 display:none; 으로 지정된 요소 노드의 텍스트는 반환하지 않는다. 그렇기 때문에 innerText 는 CSS를 고려해야 하므로 textContent 보다 느리다는 단점이 있다.

Naakite

👩‍💻🏃‍♀️

이전 포스트

TIL - event.preventDefault()

다음 포스트

TIL - innerHTML / innerText / textContent

📁JavaScript

TIL - event.preventDefault()

TIL - HTMLCollection vs NodeList

0개의 댓글