innerHTML, insertAdjacentHTML, textContent, innerText

최근 프로젝트를 구현하던 중 DOM 요소의 text를 바꾸는 데도 innerHTML을 쓰는 것으로 피드백을 받은적이 있습니다.

 

그래서 어떠한 경우에 innerHTML을 써야 하는지 비슷한 대체 기능들은 언제 사용하여야 하는지를 알아 보려 합니다.

 

innerHTML

const content = htmlString;

element.innerHTML = content;

와 같은 방식으로 사용할 수 있습니다. 

위의 코드를 실행하면 element 내부의 모든 자손은 제거되고 문자열 htmlString의 HTML들을 파싱하고 생성된 노드로 대체됩니다.

(HTML 로 파싱되기 때문에 HTML의 양식에 맞아야 합니다)

before

after

 

innerHTML은 보안상의 허점을 가지고 있습니다.

 

스크립트 태그가 추가되는 경우가 있을수 있습니다.

HTML5 에서는 innerHTML과 함께 추가된 <script>태그는 실행하지 않게 하고 있습니다.

코드가 추가는 되었지만 alert의 실행은 되지 않습니다.

 

하지만 <script> 태그 없이 javascript 실행을 할 수 있는 방법이 있습니다.

const name = "<img src='x' onerror='alert(1)'/>"
document.querySelector('#test').innerHTML = name

(위의 방법으로 공식문서 에서 안내해주고 있는데 alert의 실행은 되지 않네요)

 

그래서 일반 텍스트를 변경하는 경우에는 textcontent, 

요소의 내용을 변경하는 것이 아닌 HTML을 문서내에 삽입하는 것이라면 insertAdjacentHTML을 사용하라고 알려주고 있습니다.

 

 

---

insertAdjacentHTML

insertAdjacentHTML은 주어진 텍스트를 파싱하고 특정 위치에 node들을 추가할 수 있습니다.

element안에 존재하는 다른 node들은 건드리지 않습니다(innerHTML과 다른 점).

 

네개의 위치에 원하는 요소를 넣어줄 수 있습니다.

beforebegin, afterbegin, beforeend, afterend

 

 

---

textContent

document.querySelector('#test').textContent = 'test'

textContent는 주어진 string을 파싱하지 않고 raw하게 바로 넣어줍니다.

raw 하게 그대로 들어간 모습

 

파싱을 하지 않으므로 텍스트 컨텐츠만 변경해주어야 하는 경우라면 innerHTML을 쓰는 경우보다 먼저 선택되어야 합니다.

 

---

innerText

innerText는 textContent와 비슷해 보이지만 차이점을 가지고 있습니다.

 

innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 인식할 수 없습니다.

=> 화면에 보이는 그대로의 text를 가져올 수 있다는 이야기입니다.

 

dom 요소중 위와 같은 형식의 요소가 있다고 하겠습니다. 

이를 innerText, textContent로 가져오게 되면

아래 사진과 같이 결과값이 나오게 됩니다.

 

source태그는 보이지 않게 되고  <br>태그는 인식되어 /n으로 변경된 모습을 볼 수 있습니다.

 

 

 

4개의 요소(innerHTML, insertAdjacentHTML, textContent, innerText)를 인지하고 적절한 때에 적절한 위치에 사용하는 것이 중요할 것 같습니다.

 

 

 

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

Element.innerHTML - Web API | MDN