UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript

insertAdjacentHTML( ) / innerHTML 특징과 차이점 알아보기

클로이겅쥬 2022. 2. 23. 07:33
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

둘 다 JS를 사용해서 HTML코드를 DOM에 넣어 조작하는 메서드다.

 

 

 

1. innerHTML = " html " 


 

<span>로 둘러쌓인 텍스트를 <button>클릭 시 <p>태그로 바꾸는 JS를 작성해보았다.

 

< HTML >

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


 

 

라이브 서버로 확인해보면 클릭 버튼 옆에 텍스트가 나란히 나온다.

 

 

 

 

< JS >

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

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


 

클릭하는 순간 <span>태그에서 <p>태그로 덮어씌워진다.

innerHTML의 특징 중 하나다. 기존 노드는 삭제되면서 새로 리턴이 되어 나타난다.

 

 

 

 

 

 

 

 

 

 

2. insertAdjacentHTML( position, html )


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

C라는 텍스트가 있는 span태그를 넣어서 기준점을 정해본다.

 

 

< HTML >

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

< JS >

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 VS innerHTML >

 

el.insertAdjacentHTML( position, html ) innerHTML = "html"
인자 2개(위치값, html코드) 인자 1개 (html 코드)
기존 노드 건들지 않고 노드 추가 기존 노드 삭제 후 재구성
position 종류 4가지
( beforebegin, afterbegin, beforeend, afterend )
 

 

 

 

 

 

 

 

 

 

반응형