[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML

insertAdjacentHTML vs innerHTML

---

element.insertAdjacentHTML(position, htmlString)

 

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

 

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

 

예시 HTML 구조 - CodePen 링크 ▼

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

 

innerHTML을 사용했을 때 ▼

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

 

insertAdjacentHTML을 사용했을 때 ▼

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

 

💡 원하는 위치에 엘리먼트 노드를 삽입하는 insertAdjacentElement() 메서드도 있다. htmlString 대신 DOM 요소를 직접 전달하는 것만 다르고 나머지 사용법은 동일하다.

 

 

파라미터

---

위치 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"       ❌

 

 

레퍼런스

---

Element: insertAdjacentHTML() 메서드 - Web API | MDN

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요