insertAdjacentHTML vs innerHTML

element.insertAdjacentHTML(position, htmlString)

element.insertAdjacentHTML() 메서드는 인자로 전달한 문자열(htmlString)을 HTML로 파싱해서 지정된 위치(position)에 삽입하는 메서드다. 사용자 입력을 받지 않는 곳에 사용하면 createElement() 메서드를 사용하는 것 보다 간편하게 요소를 삽입할 수 있다. 사용자 입력을 받아서 처리할 때는 XSS 공격을 방지하기 위해 별도의 sanitizing이 필요하다.

비슷한 메서드로 element.innerHTML()이 있지만 삽입 위치를 지정할 수 없고, 기존 요소를 덮어쓰기 때문에 전체 요소를 다시 파싱해야 하는 단점이 있다. 이는 많은 데이터를 다룰 때 성능 저하를 일으킬 수 있다.

<main>
	<ul>
		<li>Todo 1</li>
		<li>Todo 2</li>
		<li>Todo 3</li>
		<!-- 추가하고 싶은 위치 -->
	</ul>
</main>

const $ul = document.querySelector("ul");
// 전체 <ul> 태그 다시 파싱 🙁
$ul.innerHTML += '<li>Todo 4</li>'; 

const $ul = document.querySelector("ul");
// 2번째 인자로 넘긴 htmlString 문자열만 파싱 😃
$ul.insertAdjacentHTML("beforeend", '<li>Todo 4</li>');

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> 원하는 위치에 엘리먼트 노드를 삽입하는 insertAdjacentElement() 메서드도 있다. htmlString 대신 DOM 요소를 직접 전달하는 것만 다르고 나머지 사용법은 동일하다.

</aside>

파라미터

위치 position

insertAdjacentHTML 첫 번째 인자로 지정할 수 있는 position 값은 아래와 같다. 대상 요소는 메서드를 호출한 요소를 가리킨다. 위 예시를 기준으로 대상 요소는 <ul> 태그가 된다.

position 삽입 위치
"beforebegin" 대상 요소 바로 이전에 삽입 (부모 요소가 있을 때만 가능)
"afterend" 대상 요소 바로 뒤에 삽입 (부모 요소가 있을 때만 가능)
"afterbegin" 대상 요소의 첫 번째 자식으로 삽입
"beforeend" 대상 요소의 마지막 자식으로 삽입 
<main>
	<!-- beforebegin 삽입 위치 -->
	<ul>
		<!-- afterbegin 삽입 위치 -->
		<li>Todo 1</li>
		<li>Todo 2</li>
		<li>Todo 3</li>
		<!-- beforeend 삽입 위치 -->
	</ul>
	<!-- afterend 삽입 위치 -->
</main>

문자열 htmlString

insertAdjacentHTML 두 번째 인자로 전달하는 문자열은 브라우저가 파싱 할 수 있는 유효한 HTML 마크업 형태여야 한다. 열고 닫는 태그를 빼먹지 않도록 주의하자.

"<li>hello</li>"  ✅
"<li>hello<li>"   ❌
"<li>hello"       ❌

레퍼런스