JavaScript로 텍스트 변경하는 방법

기존 페이지의 텍스트를 바꾸려면 먼저 올바른 DOM 요소를 선택해야 합니다. 요소의 고유한 id를 알고 있다면 getElementById() ZXPTDCF42144E65D6B010002XZ를 사용하세요. 이 메서드는 클래스명이 아니라 ID를 조회합니다. HTML 문서에서 ID는 고유해야 합니다. 일치하는 요소가 없으면 메서드는 null을 반환하며, 같은 ID를 공유하는 모든 요소를 갱신하는 대신 요소 하나를 반환합니다.

요소를 선택한 뒤에는 새 텍스트로 현재 내용을 바꿀지, 현재 내용 뒤에 덧붙일지 선택하세요. textContent ZXPTDCF42144E65D6B010004XZ는 텍스트를 읽거나 설정하는 속성입니다. createTextNode() ZXPTDCF42144E65D6B010001XZ는 텍스트 노드를 만들고, appendChild() ZXPTDCF42144E65D6B010003XZ는 그 노드를 요소에 붙입니다.

textContent ZXPTDCF42144E65D6B010004XZ로 요소의 텍스트 바꾸기

요소의 현재 내용 대신 새 텍스트를 표시하려면 textContent ZXPTDCF42144E65D6B010004XZ에 값을 설정하세요. 이 속성의 설정자는 요소의 자식 내용을 텍스트로 바꿉니다. 지정한 문자열을 HTML로 해석하지 않으므로 <나 > 같은 문자가 있어도 마크업이 되지 않고 텍스트로 남습니다.

이 완전한 예제에는 JavaScript만으로 실행할 수 있도록 요소를 간단히 흉내 내는 코드가 포함되어 있습니다. 브라우저 페이지에서는 document.getElementById("message")로 기존 요소를 선택한 뒤 같은 방식으로 값을 설정하세요.

예제를 실행해 보세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }
}

const elements = { message: new TextElement("Before") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
};

const message = document.getElementById("message");
if (message) {
  message.textContent = "Hello, JavaScript!";
}
console.log(message.textContent);

이 조건문은 요소를 찾지 못한 경우를 처리합니다. ID가 일치하지 않으면 getElementById() ZXPTDCF42144E65D6B010002XZ가 null을 반환하므로 값 설정을 건너뜁니다. 애플리케이션에서는 오류를 표시하거나, 요소가 문서에 추가된 뒤 스크립트가 실행되는지 확인하는 등 이 상황을 별도로 처리할 수 있습니다.

createTextNode() ZXPTDCF42144E65D6B010001XZ와 appendChild() ZXPTDCF42144E65D6B010003XZ로 텍스트 덧붙이기

기존 텍스트를 유지하면서 뒤에 내용을 더하려면 텍스트 노드를 만들어 선택한 요소에 추가하세요. 이 작업은 요소의 기존 자식 내용을 바꾸지 않습니다. 다음 독립 실행형 예제는 관련 DOM 작업을 보여 줍니다. 브라우저에서는 document.createTextNode() ZXPTDCF42144E65D6B010001XZ와 getElementById() ZXPTDCF42144E65D6B010002XZ가 반환하는 요소를 사용하세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }

  appendChild(node) {
    this.textContent += node.textContent;
    return node;
  }
}

const elements = { message: new TextElement("Hello, ") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
  createTextNode(text) {
    return { textContent: text };
  },
};

const message = document.getElementById("message");
if (message) {
  const addedText = document.createTextNode("JavaScript!");
  message.appendChild(addedText);
}
console.log(message.textContent);

추가된 노드의 텍스트는 요소에 이미 있던 텍스트 뒤에 이어집니다. 짧은 레이블이나 상태 메시지처럼 기존 내용을 보존하면서 텍스트를 더할 때 유용합니다. 대상 요소가 만들어지기 전에 스크립트가 실행될 수 있다면 페이지에서 요소가 생성될 때까지 기다리거나, 추가하기 전에 null 결과를 처리하세요.

텍스트를 바꿀지 덧붙일지 선택하기

요소에 새 텍스트만 표시하려면 textContent ZXPTDCF42144E65D6B010004XZ = value를 사용하세요. 기존 내용을 유지하면서 그 뒤에 텍스트를 더하려면 createTextNode(value)와 appendChild() ZXPTDCF42144E65D6B010003XZ를 사용하세요. 두 작업은 서로 다릅니다. 속성에 값을 설정하면 자식 내용이 교체되고, 노드를 덧붙이면 새 자식이 추가됩니다.

두 방법 모두 지정한 값을 HTML로 해석하지 않고 텍스트로 처리합니다. 따라서 사용자 입력값이 이 API를 통해 마크업으로 바뀌는 것을 막을 수 있지만, 애플리케이션에 필요할 수 있는 다른 보안 조치를 대신하지는 않습니다. 대상의 ID를 사용해 getElementById() ZXPTDCF42144E65D6B010002XZ로 요소를 찾으세요. 페이지 로딩 시점이나 조건부 마크업 때문에 요소가 없을 수 있다면 결과를 확인한 다음, 기존 텍스트를 유지해야 하는지에 따라 바꾸기와 덧붙이기 중 하나를 선택하세요.