[JavaScript] 🌐 insertAdjacentHTML와 innerHTML 차이점 정리

목차

insertAdjacentHTML와 innerHTML 차이점

insertAdjacentHTML와 innerHTML은 둘 다 JS를 사용해서 HTML 코드를 DOM에 넣어 조작하는 메서드다. 그럼 이 두가지 함수를 어떻게 사용하는지에 대해서 포스팅해보겠다.

---

innerHTML 사용법

innerHTML 속성은 JavaScript를 통해서 html의 content를 가져와서 그 값을 화면상에 보여주거나 직접 변경하여 보여주는 것을 뜻한다. <span>로 둘러쌓인 텍스트를 <button>클릭 시 <p>태그로 바꾸는 JS를 작성해보자.

HTML

<button>click</button>
<span id="el">안녕하세요, 지금은 'span' 태그입니다.</span>

 

라이브 서버로 확인해보면 클릭 버튼 옆에 텍스트가 나란히 나오는 것을 확인할 수 있다.

JavaScript

const btn = document.querySelector("button");
const el = document.querySelector("#el");

btn.addEventListener('click', e => {
  el.innerHTML = "<p>지금은 'p'태그로 변경되었습니다.</p>"
})

 

클릭하는 순간 <span>태그에서 <p>태그로 덮어씌워진다. 이것은 innerHTML의 특징 중 하나로, 기존 노드는 삭제되면서 새로 값이 되어 나타난다.

---

insertAdjacentHTML 사용법

insertAdjacentHTML도 innerHTML과 비슷하지만 innerHTML을 사용하게 되면 기존에 있던 것은 덮어쓰기가 되어버려서 기존의 값이 보이지 않게 된다. 하지만 insertAdjacentHTML은 기존의 값을 건드리지 않고, 새롭게 내가 입력하고 싶은 값을 어떤 위치에 놓을지를 설정할 수 있다는 차이가 있다. 

 

position에는 4가지의 옵션이 있는데, 어떤 값을 넣느냐에 따라 html 요소 위치를 설정 할 수 있다.

 

그럼, C라는 텍스트가 있는 span 태그를 넣어서 기준점을 정해보자.

HTML

<span id="el">C</span>

JavaScript

const el = document.querySelector("#el")

el.insertAdjacentHTML('beforebegin', '<span>A-</span>'); 
// 타켓 요소 전(형제레벨)에 생성- 시작 태그의 앞(형제 레벨로) 

el.insertAdjacentHTML('afterbegin', '<span>B-</span>'); 
// 타켓 요소 다음(자식요소)에 생성 - 시작 태그의 뒤(자식 요소로) 

el.insertAdjacentHTML('beforeend','<span>-D</span>'); 
// 타켓 요소 '끝나는 태그' 바로 직전(자식요소로)에 요소를 생성 - '종료 태그' 앞(자식 요소로) 

el.insertAdjacentHTML('afterend','<span>-E</span>'); 
// 타켓 요소의 '끝나는 태그' 바로 다음(형제레벨)에 요소를 생성 - '종료 태그' 뒤(형제 레벨로)

위의 코드와 같이 작성하면 브라우저 화면에 A - B - C - D - E 순으로 결과가 나오는 것을 확인 할 수 있다.

 

또한, 개발자 도구를 열어서 확인해보면 C 기준으로 정확한 위치를 확인할 수 있다.

 

---

insertAdjacentHTML와 innerHTML 차이점 정리

1. innerHTML은 기존 요소를 파싱하기 때문에 비싼 DOM 작업을 필요로 한다.
2. 따라서 기존 요소를 파싱하지 않는 insertAdjacentHTML을 사용하면 작업을 빠르게 완료할 수 있다.
3. 파싱 작업을 아예 배제하고, createElement와 insertAdjacentElement를 사용하면 더 빠르게 완료할 수 있다.
4. innerText 대신 textContent를 쓰면 더 빠르게 완료할 수 있다.

---

참고 문헌

• 1[JS]insertAdjacentHTML 메서드로 HTML 요소 추가하기
• 2🌐 insertAdjacentHTML로 쉽게 append 하자
• 3Element.insertAdjacentHTML()