insertAdjacentHTML 과 innerHTML 차이 알아보기

1. innerHTML 

요소(element) 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정합니다. 그리고 MDN 문서에 이렇게 표기되있다. 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오.

---

2. insertAdjacentHTML

insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱 하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 이미 사용 중인 element는 다시 파싱 하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다.

---

3. 비교

insertAdjacentHTML( position, text )	innerHTML( text )
beforebegin(앞에), afterbegin(맨앞 child), beforeend(맨뒤 child), afterend(뒤에) 4개의 중 하나와 position과 추가할text를 인자로 사용한다.	변경할 text만 인자로 받는다.
추가 파싱없이 기존의 DOM tree안에 node를 insert한다.	새로운 node로 교체한다. 추가적으로 파싱작업을 한다.

※ text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.

---

4. 추가 내용

innerHTML은 가급적 사용을 피하는게 좋다. HTML문자열을 그대로 추가하는 것이기 때문에 XSS 공격의 위험으로 보안상으로도 문제가 되고 파싱 작업으로 인해 성능면에서도 떨어진다. 그러면 대체제로 두 가지 메서드가 있다.

textContent와 innerText 이 두 개의 메서드 중에서도 textContent를 사용하는 것이 가장 좋다.

textContent	innerText	innerHTML
요소 내부에 raw text값을 사용함으로 파싱성능이 올라가 성능면이나 보안적으로 강점을 갖는다.	화면에 보이는 모습의 text를 읽어오고 일반적인 text값을 사용한다. 그냥 textContent를 사용하자.	<script>태그는 사용이불가 하지만 다른 루트가 남아있어 보안상 매우 위험하고 HTML 파싱 성능도 좋지 못하다.

---

참고.

developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

developer.mozilla.org/ko/docs/Web/API/Node/innerText

developer.mozilla.org/ko/docs/Web/API/Node/textContent