script

JS innerHTML textContent 차이는?

2hansoul 2023. 6. 15. 19:57
반응형

둘 다 텍스트로 취급하여 출력 되는 거는 동일 하다 

  1. innerHTML:
    • 요소의 내용을 설정하거나 반환하는 데 사용됩니다.
    • HTML 문자열을 사용하여 요소의 내용을 변경할 수 있습니다.
    • 요소 내의 HTML 태그를 포함한 모든 내용을 수정할 수 있습니다.
    • 문자열을 HTML로 해석하고 해당 내용을 요소에 삽입합니다.
    • 주의해야 할 점은 innerHTML을 사용할 때, HTML 문자열에 악의적인 스크립트가 포함될 수 있으므로 신뢰할 수 없는 데이터에 직접 사용하는 것은 보안상 위험할 수 있습니다.
  2. textContent:
    • 요소의 텍스트 콘텐츠를 설정하거나 반환하는 데 사용됩니다.
    • HTML 태그를 문자 그대로 처리하지 않고 텍스트로 취급합니다.
    • HTML 태그를 텍스트로 출력하고 싶을 때는 <와 > 등의 특수 문자를 이스케이프해야 합니다.
    • textContent는 요소의 자식 요소를 포함한 모든 텍스트를 반환하며, HTML 태그는 텍스트로 취급됩니다.

ex

<div id="myElement">
  <strong>Hello</strong> <em>world</em>!
</div>
<script>
var element = document.getElementById("myElement");

console.log(element.innerHTML);      // 출력: <strong>Hello</strong> <em>world</em>!
console.log(element.textContent);    // 출력: Hello world!

element.innerHTML = "<p>New content</p>";
console.log(element.innerHTML);      // 출력: <p>New content</p>
console.log(element.textContent);    // 출력: New content
</script>

 

해당 예시를 봐도 출력은 동일하다 다만 innerHTML은 HTML 속성들이 사용 가능하고 textContent는  text자체만 출력 하게 된다 뭘 사용해도 상관 없지만 순수 text만 필요한 상태라면 굳이 innerHTML 사용은 필요 없을 것 같다 

반응형