JavaScript를 사용하여 div의 텍스트 변경

div에 표시되는 텍스트를 바꾸려면 요소를 선택한 뒤 textContent 속성에 문자열을 할당합니다. 이 방식은 문자열에 <나 > 같은 문자가 있어도 텍스트로 처리합니다.

textContent로 div의 텍스트 변경

브라우저 페이지에서 스크립트를 요소 뒤에 두거나 문서 로드가 끝난 후 실행하세요. 선택자가 의도한 div와 일치해야 합니다.

<div id="message">Welcome</div>
<script>
  const message = document.querySelector("#message");
  message.textContent = "Hello, world!";
</script>

위 브라우저 예제는 실제 페이지를 업데이트하며, 화면에 보이는 “Welcome” 문구는 영어로 유지됩니다. 속성 할당과 표시되는 값을 보여 주는 간단한 JavaScript 예제의 문구 “Hello, world!”도 영어입니다. 다음 예제를 실행해 보세요.

const div = { textContent: "" };
div.textContent = "Hello, world!";
console.log(div.textContent);

Hello, world!

이 실행 가능한 예제는 일반 객체를 사용해 속성 할당과 출력을 보여 주고, HTML 예제는 실제 페이지를 업데이트합니다. 두 예제의 화면 문구인 “Welcome”과 “Hello, world!”는 코드 블록이 변경되지 않으므로 영어로 표시됩니다. textContent에 할당하면 요소의 자식 노드가 새 문자열을 담은 텍스트 노드로 바뀝니다. 일반 텍스트가 목적일 때, 특히 값이 사용자 입력이나 신뢰할 수 없는 출처에서 올 때 사용하세요.

textContent와 innerHTML 중 선택하기

텍스트에는 textContent를 사용하세요. innerHTML은 할당된 문자열을 HTML로 파싱하고 그 결과 노드로 요소의 자식들을 바꾸므로, 마크업을 넣으려는 경우에만 선택합니다. 신뢰할 수 없는 데이터를 HTML 파싱 문맥에 삽입하면 교차 사이트 스크립팅 위험이 생길 수 있습니다. 마크업을 파싱한다고 해서 모든 문자열이 자동으로 코드로 실행되는 것은 아닙니다.

예를 들어 문자열 <strong>Hi</strong>를 textContent에 할당하면 해당 문자가 그대로 표시됩니다. 이를 innerHTML에 할당하면 strong 요소가 만들어져 브라우저에 굵은 글씨의 “Hi”가 표시됩니다. 마크업이 필요하다면 신뢰할 수 없는 값과 분리하고 적절하고 안전한 렌더링 방식을 사용하세요.

텍스트를 업데이트하는 다른 JavaScript 방법

innerText는 렌더링된 텍스트를 가져오거나 설정하며 스타일과 레이아웃의 영향을 반영할 수 있습니다. 그런 동작이 필요할 때 사용하세요. 단순히 텍스트를 바꾸려면 일반적으로 textContent가 더 명확합니다.

DOM 콘텐츠를 단계적으로 만들 때는 createTextNode로 텍스트 노드를 만든 다음 기존 자식 노드를 그 노드로 바꿀 수 있습니다. 백틱으로 작성하는 템플릿 리터럴은 동적 문자열을 구성하는 데 유용하며, 결과 문자열을 textContent에 할당하면 여전히 텍스트로 처리됩니다. 페이지에 jQuery가 이미 로드되어 있다면 $("#message").text("Hello, world!")로 선택한 요소의 텍스트를 설정할 수 있습니다. jQuery가 없다면 위에 나온 브라우저 DOM API를 사용하세요.

장식용 텍스트에 CSS 생성 콘텐츠 사용

CSS ::before와 ::after 의사 요소는 요소 옆에 작은 레이블을 붙이는 것과 같은 시각적 장식을 더할 수 있습니다. 생성된 콘텐츠는 JavaScript로 div의 DOM 텍스트를 바꾸는 것이 아니며, 필수 정보나 상호작용 콘텐츠에는 적합하지 않습니다. img를 포함한 일부 대체 요소는 일반 요소와 같은 방식으로 생성 콘텐츠를 표시하지 않습니다. 텍스트가 페이지의 실제 콘텐츠에 포함되어야 한다면 textContent를 사용하세요.