HTMLElement의 inner~, insert~메서드 설명

innerText: HTMLElement의 랜더링 된 텍스트 값(사용자에게 보여지는 텍스트 값)

• 렌더링 된 텍스트 값이기 때문에 변경해도 재렌더링이 발생하지 않음
• 즉, HTML태그를 사용해도 인식되지 않음(ex. <div>가 그대로 텍스트(렌더링 되지 않기 때문))

innerHTML: HTMLElement내에 포함된 HTML

• innerHTML을 변경하면 DOM렌더링 시 반영되어 출력됨
• 보안 위협(XSS)이나 성능 이슈(불필요한 파싱)가 있어 단순 Text 삽입 시에는 사용하지 않는 것이 좋다.

textContent: 해당 노드가 가지고 있는 텍스트 값

• innerText와는 달리 <script>나 <style>태그와 상관없이 해당 노드가 가지고 있는 텍스트 값으르 그대로 읽어옴
  • Ex. innerText와는 달리 display:none 스타일이 적용된 숨겨진 텍스트도 읽어옴

insertAdjacentText: 입력된 문자열을 기존 문자열에 삽입하는 메서드

insertAdjacentHTML: 입력된 문자열을 html형식으로 기존 문자열에 삽입하는 메서드

insertAdjacent 추가 설명

targetElement.insertAdjacentText(“들어갈 위치”, “문자열”): targetElement를 기준으로 위치를 반영하여 특정 “문자열”을 삽입하는 메서드

targetElement.insertAdjacentHTML(“들어갈 위치”, “html 문자열”):  targetElement를 기준으로 위치를 반영하여 “html 문자열”을 삽입하는 메서드