DOM으로 HTML 다루기 - innerHTML, insertAdjacentHTML, createContextualFragment
·
FrontEnd/JavaScript
"HTML 문자열을 어디에, 어떻게 넣을까" 정리해 두면성능이랑 보안 둘 다 덜 털린다.처음에 DOM 다룰 때는 거의 무조건 이렇게 시작한다.target.innerHTML = "뭐라도 나오게 해봐...";빠르고 편하다. 근데 규모가 커지면 갑자기 이런 고민이 튀어나온다.innerHTML += 로 계속 추가해도 되나?특정 위치에만 쏙 끼워 넣고 싶을 땐 뭐 쓰지?XSS 같은 보안 이슈는 어떻게 피하지?이번 글에서는 HTML 삽입/조작할 때 자주 쓰는 3가지 DOM 메서드를내가 실제로 써본 기준으로 정리해 본다.innerHTMLinsertAdjacentHTMLdocument.createRange().createContextualFragment결론 먼저한 줄씩만 꽂으면 이렇게 정리할 수 있다전체 교체 → in..