- innerHTML
- 기존에 있던 것은 덮어쓰기 됨
- element의 자식 요소를 파싱하고, newDOMString을 파싱하고, element에 파싱된 객체를 대입한다.
- DOM을 건들기 때문에 비용이 많이 든다
- XSS(Cross-Site Scripting)는 웹사이트에 악성 스크립트를 주입하는 행위로 해당 행위에 취약하다
- 일반 텍스트 삽입 시에는 Node.textContent를 사용하는 것이 좋다.
- insertAdjacentHTML
- 자식 요소의 원하는 포지션에 newDOMString을 만들어서 추가해 준다.
- 기존의 자식 요소를 건들지 않기 때문에 innserHTML보다 비용이 적게 든다.
결론 💡
- innerHtml 보다 insertAdjacentHTML을 사용하는 것이 보안상, 성능상에서도 훨씬 유리하다!!
얼렁뚱땅 개발자