CSS. innerHTML / innerText 차이점

innerHTML / innerText 쓰임새

innerHTML과 innerText는 주로 자바스크립트에서 html 태그(<div>,<p>등)의 내부 문자를 가져올 때 사용한다

 

innerHTML / innerText 차이점

innerHTML의 경우, 태그를 적용하여 문자를 보여주며

innerText의 경우, 태그도 하나의 텍스트로 인식하여 보여준다

 

innerHTML / innerText 예시

코드 출처 : https://hianna.tistory.com/480

innerHTML의 경우

function setInnerHTML()  {
  const element = document.getElementById('content');
  element.innerHTML = "<div style='color:red'>A</div>";
}

반환 : A

 

innerText의 경우

function setInnerText()  {
  const element = document.getElementById('content');
  element.innerText = "<div style='color:red'>A</div>";
}

반환 : <div style='color:red'>A</div>

 

총평

막상 정리해보니 그렇게 어려운 개념은 아니었다 다행이다

innerHtml이라고 쓰거나 innerTEXT라고 쓰지 말고

innerHTML / innerText라고 쓰자!