innerText vs TextContent vs innerHTML

innerText : '사람이 읽을 수 있는' 텍스트만 처리한다. 즉 스타일링으로 인해 텍스트가 안보인다면 처리하지 않는다

• layout이 발생한다는 단점이 있고 IE에 특화되어 개발된 API이기 때문에 사용을 지양하는 것이 좋다. (대신 TextContent 사용하면 된다)

😍layout에 대한 자세한 설명은 제 벨로그에 있습니다.😍

innerHTML : element 안의 HTML이나 XML 가져오거나 HTML element에 값을 추가할 수 있다.

• innerHTML은 요소 안에 있는 모든 태그들과 요소들을 문자열 형태로 가져올 수 있다

• 보안 문제(XSS 공격)가 있어서 사용자에게 텍스트 input을 받아와서 사용할 때는 절대 사용하면 안된다

TextContent : 스타일링 포함한 텍스트만 처리, 문자열 데이터만 읽어온다

• layout이 발생하지 않아서 단순히 문자열을 설정하고 읽어올 때 사용한다면 성능이 innerText보다 훨씬 뛰어나다