innerHTML vs innerAdajcentHTML() 비교

innerHTML vs innerAdajcentHTML() 비교

• 둘 다 HTML 내용을 다룰 때 쓰이는 가장 일반적인 방법 중 하나이다.
• innerHTML 은 프로퍼티의 형태로 쓰이고 innerAdjacentHTML() 은 메서드의 형태로 쓰인다.

innerHTML 프로퍼티

• HTML 의 getter 혹은 setter 의 역할을 하는 인터페이스이다.
• 내용을 가져올 수도 있고 내용을 삽입할 수도 있다.

장점

• 직관적이고 사용하기 쉽다.
• 내부 내용 전체를 대체해야 할 때 유용하다.

단점

• 엘리먼트 내부 전체 내용을 지웠다가 새로 렌더링 해야 하는 만큼 비용이 크다.
• 사용자가 작성한 내용을 innerHTML 로 더해주는 코드가 있다면 XSS 공격에 취약해진다.

innerAdjacentHTML() 메서드

• 전달된 텍스트를 HTML 혹은 XML 의 형태로 파싱하고 노드를 DOM Tree 의 특정 위치에 삽입한다.

장점

• DOM 노드 전체를 다시 렌더링하지 않기 때문에 innerHTML 보다 많이 빠르다.
• beforebegin, afterbegin, beforeend, afterend 등 유연한 위치 설정이 가능하다.

단점

• innerHTML 보다는 사용하기 조금 더 복잡하다.
• innerHTML 과 마찬가지로 XSS 공격에 취약해진다.

Best Practice

• ELEMENT 내부 DOM 전체를 새로 갈아끼우고 싶다면, innerHTML 프로퍼티
• 현재의 내용을 유지한 채로 새롭게 몇개의 노드만 추가하고 싶다면, innerAdjacentHTML() 메서드

참고사항

• 항상 XSS 공격에 대해 주의해야 한다.
• HTML 이 아니라 순수한 텍스트를 넣을 때는 textContent 혹은 innerText 를 이용하는 것이 안전하다.
• createElement(), createTextNode(), appendChild(), insertBefore() 와 같은 네이티브 메서드들이 상대적으로 성능도 더 좋고 안전하다.

성능 비교