[JS] innerHTML과 InsertAdjacentHTML 비교(DOM Element)

자바스크립트로 DOM 요소(Element)를 추가/수정해야 할 때 많이 사용하는 방법은 두 가지가 있다.

첫 번째는 innerHTML 이며 문법은 아래와 같다.

const content = element.innerHTML;
element.innerHTML = htmlString;

두 번째 방법은 insertAdjacentHTML( ) 이며 문법은 아래와 같다.

element.insertAdjacentHTML(position, text);

위 방법 모두 DOM요소를 조작할 수 있다는 점에서 차이가 없다고 생각할 수 있지만 이러한 생각은 틀린 생각이다.

첫 번째로 소개한 innerHTML은 변경하는 대상 Element의 하위 노드의 노드 트리를 삭제하고 재구성되는 과정이 추가되어 그만큼 시간이 소요되기 때문에 수정할 때에만 사용하는 것이 바람직하다.

insertAdjacentHTML는 대상 Element의 하위 노드를 건드는 일이 없이 지정된 위치에 새로운 노드를 생성해주기 때문에 추가할 때에만 사용하는 것이 바람직하다고 mozilla에서 권장하고 있다.

◾ insertAdjacentHTML의 position에 따른 위치

<!-- beforebegin -->
<body>
<!-- afterbegin -->
<div></div>
<!-- beforeend -->
</body>
<!-- afterend -->

▪ beforebegin: 대상 Element 앞에 추가

▪ afterbegin: 대상 Element 의 첫 번째 child로 추가

▪ beforeend: 대상 Element 의 마지막 child로 추가

▪ afterend: 대상 Element 뒤에 추가

◾ 요약

📌 참고사이트

[JS] ES-Lint 비활성화 하는 방법 (0)	2023.01.01
[JS] 내장 객체 비교 및 사용 방법(Array, Set, Map, Object) (0)	2022.08.31
[JS] 자바스크립트 this (1/2) (0)	2022.06.08
[JS] 자바스크립트 this(2/2) (0)	2022.06.08
[JS] 참조 타입의 얕은 복사와 깊은 복사(Shallow Copy & Deep copy) (2)	2022.05.25