innerHTML vs textContent 차이 및 활용법

때에 따라 자바스크립트에서 화면의 텍스트를 수정해야 할 때가 있다.

이럴 때 innerHTML 을 자주 썼는데 검색을 해보니 innerHTML은 크로스 사이트 스크립트(XSS) 공격에 취약하다고 한다

대안으로 innerText와 textContent를 많이 비교하여 사용하던데 innerText는 파이어폭스에서 지원하지 않는다고 하여 textContent를 대안으로 써보니 아래와 같은 문제가 있었다.

See the Pen innerHTML vs textContent by ohsehan (@ohsehan) on CodePen.

바로 텍스트만 수정할 땐 문제가 없었지만 html태그와 같이 수정하려고 하니 textContent는 html태그를 문자열로 인식하여 저장하는 듯하다.

그래서 야매지만 내가 생각해낸 방법은 element를 가져올 때 div를 가져오는 것이 아닌 html태그에 id를 넣어 element로 가져오는 것이다.

See the Pen h2 id to textContent by ohsehan (@ohsehan) on CodePen.