본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

createTextNode vs innerHTML vs textContent

중요도: 5

빈 DOM 요소 elem과 text라는 문자열이 있습니다.

셋 중에서 같은 동작을 수행하는 명령어는 무엇일까요?

  1. elem.append(document.createTextNode(text))
  2. elem.innerHTML = text
  3. elem.textContent = text

정답: 1 과 3.

두 명령어는 text를 ‘텍스트로’ elem 안에 추가합니다.

예시:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<script>
  let text = '<b>text</b>';

  elem1.append(document.createTextNode(text));
  elem2.innerHTML = text;
  elem3.textContent = text;
</script>