[JS]insertAdjacentHTML 메서드로 HTML 요소 추가하기

insertAdjacentHTML 메서드로 HTML 요소 추가하기

JavaScript에서 HTML 요소를 추가할 수 있는 방법으로 innerHTML 프로퍼티가 존재합니다. 하지만 innerHTML은 생각보다 빠르게 동작하지 않으며 많은 위험 요소를 가지고 있습니다.

 

이번 포스팅은 innerHTML의 위험성과 JavaScript에서 HTML 요소를 추가할 수 있는 또 다른 방법인 insertAdjacentHTML() 메서드를 설명합니다.

---

innerHTML의 위험성

HTML 요소를 가져온 다음 innertHTML 프로퍼티의 값을 변경하면 HTML 요소의 텍스트를 변경하거나 하위 노드를 추가할 수 있습니다.

 

아래는 id가 "list"인 <ul> 요소를 가져온 다음 innerHTML 프로퍼티를 사용하여 두 개의 <li> 요소를 추가합니다.

<ul id="list">
  <li>리스트 1</li>
</ul>

const ulNode = document.getElementById("list");

ulNode.innerHTML += `<li>리스트 2</li><li>리스트 3</li>`;

[실행 결과]

위 예제처럼 innerHTML 프로퍼티 사용 방법은 아주 간단합니다. 하지만, innerHTML 프로퍼티는 성능 및 보안이 취약하다는 몇 가지 문제가 있습니다.

---

단점 1. 매우 느림

innerHTML 프로퍼티의 값을 변경하면 innerHTML 프로퍼티를 호출한 노드를 삭제 후 재구성합니다. 위 예제로 설명하자면 <ul> 요소를 삭제한 다음 innerHTML 프로퍼티의 값이 적용된 <ul> 요소를 다시 표현합니다.

 

간단한 HTML 문서에서 innerHTML 프로퍼티를 사용하면 큰 문제가 되지 않을 수 있지만, 복잡한 HTML 문서에서는 노드를 재구성하는 데 시간이 많이 걸리고 의도하지 않은 부작용이 발생할 수 있습니다.

---

단점 2. 기존 이벤트 리스너 제거

innerHTML 이전에 설정된 이벤트 리스너를 제거한다는 것입니다. 노드를 삭제 후 재구성하는 과정에서 이벤트 리스너가 손실됩니다.

---

단점 3. XSS

innerHTML를 사용하면 악의적인 사용자가 XSS(Cross-Site Scripting)을 사용하여 개인 사용자 정보를 갈취하거나 악의적은 스크립트를 추가할 수 있습니다. 

반응형

---

insertAdjacentHTML 사용 방법

insertAdjacentHTML() 메서드를 사용하면 텍스트 또는 HTML 요소를 지정된 위치에 삽입할 수 있습니다.

element.insertAdjacentHTML(positionName, text);

매개변수

positionName: 추가하려는 텍스트 또는 HTML 요소의 위치를 나타내는 문자열이며 아래 네 가지 값 중 하나를 사용합니다.

- beforebegin: 요소 앞

- afterbegin: 요소 안의 가장 첫 번째 자식 노드

- beforeend: 요소 안의 가장 마지막 자식 노드

- afterend: 요소 뒤

 

반환 결과

존재하지 않습니다.

 

아래는 id가 "list"인 요소에서 insertAdjacentHTML() 메서드를 호출하는 예제입니다.

<ul id="list">
  <li>HTML</li>
  <li>JS</li>
  <li>CSS</li>
</ul>

const ulNode = document.getElementById("list");

ulNode.insertAdjacentHTML("beforebegin", "<h2>Web Programming</h2>");
ulNode.insertAdjacentHTML("afterbegin", "<li>Svelte</li>");
ulNode.insertAdjacentHTML("beforeend", "<li>Angular</li>");
ulNode.insertAdjacentHTML("afterend", "<p>I'm frontend developers</p>");

[JavaScript 코드 적용 전]

[JavaScript 코드 적용 후]

JavaScript 코드가 적용되면 HTML 문서가 아래와 같이 변경됩니다.

<h2>Web Programming</h2>
<ul id="list">
  <li>Svelte</li>
  <li>HTML</li>
  <li>JS</li>
  <li>CSS</li>
  <li>Angular</li>
</ul>
<p>I'm frontend developers</p>

insertAdjacentHTML() 메서드는 텍스트 또는 HTML 요소를 삽입할 때, innerHTML 프로퍼티와 달리 노드를 삭제하지 않으므로 기존 HTML 요소를 손상시키지 않습니다. insertAdjacentHTML() 메서드는 기존 HTML 요소를 손상시키지 않고 텍스트 또는 HTML 요소를 추가하므로 innerHTML 프로퍼티보다 조금 더 빠르게 동작합니다.

---

정리

• innerHTML 프로퍼티는 노드를 삭제 후 재구성하므로 복잡한 HTML 문서에서 사용하면 HTML을 재구성하는 데 많은 시간이 소모될 수 있습니다.
• insertAdjacentHTML() 메서드는 노드를 재구성하지 않고 텍스트 또는 HTML 요소를 원하는 위치에 추가하므로 innerHTML 프로퍼티보다 빠르게 동작합니다.