[왕초보JavaScript] insertAdjacentHTML 과 innerHTML의 차이

JavaScript에서 insertAdjacentHTML innerHTML의 차이를 설명하기 전에, 먼저 innerHTML과 insertAdjacentHTML에 대해서 알아보겠습니다.

innerHTML

 innerHTML 속성은 JavaScript를 통해서 html의 content를 가져와서 그 값을 화면상에 보여주거나 직접 변경하여 보여주는 것을 말합니다.

 

 다음의 예시를 보면 좀 더 이해하기 쉬울 겁니다.  

 

See the Pen arRYxZ by kim jihae (@saea) on CodePen.

 

 우선, 저 문장을 해석하자면 다음과 같습니다.

var x = / document / .getElementById("myP") / .innerHTML;

 

var x = : "x라는 변수는 =뒤에 것을 의미해"
document : "니가 작성한 html 문서에서"
.get : "가져와"
ElementById("myP") : "'myP'라는 id 이름을 가진 요소를"
.innerHTML : "그리고 html에 넣어서 보여줘"

즉, "이 x라는 변수는 니가 작성한 html문서에서 myP라는 이름을 가진 id의 요소를 가지고 와서 html에 넣어서 보여줘"라는 의미입니다.

 

그래서 "try it"버튼을 눌렀을 경우, html에서 불러온 "myP"의 이름을 가진 id의 값 "I am a paragraph."을 가지고 오게 되는 것 입니다.

---

insertAdjacentHTML도 innerHTML과 같은 것이지만 둘의 차이는 다음과 같습니다.

Syntax:
element.insertAdjacentHTML( position, text )
element.innerHTML( text )

* id : element

element.insertAdjacentHTML( position, text )	element.innerHTML( text )
2개의 인자(추가될 위치, html코드)가 필요함 (추가될 위치, html코드)	1개의 인자 필요
지정한 곳에 노드가 추가 될 뿐 기존 노드 건드리지 않음	기존 노드 삭제 후 재구성
첫번재 인자인 "position"에서는 4종류가 있음.[ beforebegin, afterbegin, beforeend, afterend ]

(pc로 보시면 더욱 편리합니다)

 

insertAdjacentHTML와 innerHTML의 차이를 그림으로 나타낸 것.

쉽게 말해,

innerHTML을 사용하게 되면 기존에 있던 것은 덮어쓰기가 되어버리는 것입니다. 기존의 값은 보이지 않습니다.

하지만 insertAdjacentHTML은 기존의 값은 건드리지 않고, 새롭게 내가 입력하고 싶은 값을 어떤 위치에 놓을지 까지 설정할 수 있습니다.