jQuery에서 텍스트를 변경하는 방법

jQuery의 text() 메서드로 선택한 요소 안의 텍스트를 읽거나 새 텍스트를 설정할 수 있습니다. 인수 없이 .text()를 호출하면 텍스트를 읽고, 문자열을 전달하면 선택한 요소들의 텍스트 콘텐츠를 바꿉니다.

jQuery의 text() 메서드

인수 없이 호출하는 .text()는 getter입니다. 선택된 요소들의 텍스트 콘텐츠를 하나로 합쳐 반환합니다. 예를 들어 페이지에 <p id="line">It's a line.</p>이 있으면 $('#line').text()는 It's a line.을 반환합니다. 이 호출은 현재 텍스트를 읽을 뿐 값을 설정하지 않습니다.

값을 전달하면 .text(value)는 setter로 동작합니다. 선택된 모든 요소의 텍스트 콘텐츠를 바꾸고 jQuery 컬렉션을 반환하므로 메서드를 이어서 호출할 수 있습니다. 값은 텍스트로 처리되므로 <strong> 같은 마크업 문자는 HTML로 해석되지 않고 텍스트로 표시됩니다. 마크업을 설정하려는 경우에만 .html()을 사용하고, 신뢰할 수 없는 입력을 안전하게 처리해야 합니다.

jQuery에서 text() 메서드로 텍스트 직접 변경하기

브라우저 페이지에서는 jQuery를 불러온 다음 문서가 준비되면 setter를 실행합니다. 다음 Node 예제는 페이지와 jQuery 선택을 간단히 흉내 내어 같은 호출을 독립적으로 실행합니다. “Text”가 들어 있는 문단으로 시작해 텍스트를 설정한 뒤 결과 값을 출력합니다.

const document = {};
const elements = { '#title': { text: 'Text' } };

function $(selector) {
  if (selector === document) {
    return { ready(callback) { callback(); } };
  }
  const element = elements[selector];
  return {
    text(value) {
      if (value === undefined) return element.text;
      element.text = value;
      return this;
    }
  };
}

$(document).ready(function() {
  $('#title').text('New Text');
});
console.log($('#title').text());

New Text

실제 페이지에서는 <p id="title">Text</p>와 준비 완료 콜백을 사용하고, 같은 setter인 $('#title').text('New Text')를 호출합니다. 콜백이 실행되면 문단에 “New Text”가 표시됩니다. Node의 대체 구현은 메서드 호출을 보여 주는 예시이며, 브라우저에서 사용하려면 페이지에 jQuery를 불러와야 합니다.

jQuery에서 클릭 이벤트로 text() 메서드 사용하기

클릭 후 텍스트를 바꾸려면 버튼에 이벤트 처리기를 연결하고 그 안에서 대상 문단에 .text()를 호출합니다. 다음 자체 완결형 Node 예제는 문단과 버튼을 모델링한 다음 등록된 처리기를 호출해 클릭 전후의 텍스트를 보여 줍니다.

const document = {};
const elements = {
  '#title': { text: 'Text' },
  '#press': {}
};
const handlers = {};

function $(selector) {
  if (selector === document) {
    return { ready(callback) { callback(); } };
  }
  const element = elements[selector];
  return {
    text(value) {
      if (value === undefined) return element.text;
      element.text = value;
      return this;
    },
    click(callback) {
      handlers[selector] = callback;
      return this;
    }
  };
}

$(document).ready(function() {
  $('#press').click(function() {
    $('#title').text('Text Altered');
  });
});

console.log($('#title').text());
handlers['#press']();
console.log($('#title').text());

Text
Text Altered

브라우저에서는 <p id="title">Text</p>와 <button id="press">Text Change</button>를 두고, 스크립트보다 먼저 jQuery를 불러온 뒤 이벤트 처리기를 사용합니다. 문단에는 처음에 “Text”가 표시되고, 버튼을 클릭하면 “Text Altered”로 바뀝니다. 처리기가 의도한 문단을 업데이트하도록 선택자에 쓴 ID와 페이지 요소의 ID를 일치시키세요.