So ändern Sie Text in jQuery

Verwenden Sie die jQuery-Methode text(), um den Text eines ausgewählten Elements auszulesen oder neuen Text festzulegen. Rufen Sie .text() ohne Argument auf, um den Text auszulesen; übergeben Sie eine Zeichenfolge, um den Textinhalt der ausgewählten Elemente zu ersetzen.

Die text()-Methode in jQuery

Die Form ohne Argument von .text() ist ein Getter: Sie gibt den kombinierten Textinhalt der gefundenen Elemente zurück. Enthält die Seite zum Beispiel <p id="line">It's a line.</p>, gibt $('#line').text() den Wert It's a line. zurück. Dieser Aufruf liest den aktuellen Text aus; er legt keinen Wert fest.

Wenn Sie einen Wert übergeben, ist .text(value) ein Setter. Er aktualisiert den Textinhalt aller gefundenen Elemente und gibt die jQuery-Sammlung zurück, sodass sich Methodenaufrufe verketten lassen. Der Wert wird als Text behandelt: Markup-Zeichen wie <strong> werden daher als Text angezeigt und nicht als HTML interpretiert. Verwenden Sie .html() nur, wenn Sie Markup setzen möchten und nicht vertrauenswürdige Eingaben zuvor sicher behandelt haben.

Text mit der text()-Methode direkt mit jQuery ändern

Laden Sie in einer Browserseite jQuery und führen Sie den Setter aus, nachdem das Dokument bereit ist. Das folgende Node-Beispiel verwendet eine einfache Nachbildung der Seite und der jQuery-Auswahl, damit sich derselbe Aufruf isoliert ausführen lässt. Es beginnt mit einem Absatz, der „Text“ enthält, setzt dessen Text und gibt anschließend den Wert aus:

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

Verwenden Sie für eine echte Seite den Ready-Callback mit <p id="title">Text</p> und demselben Setter $('#title').text('New Text'). Sobald der Callback ausgeführt wird, zeigt der Absatz „New Text“ an. Die Node-Nachbildung veranschaulicht den Methodenaufruf; für die Verwendung im Browser muss die Seite selbst jQuery laden.

Text mit der text()-Methode bei Klickereignissen mit jQuery ändern

Um den Text nach einem Klick zu aktualisieren, binden Sie einen Handler an die Schaltfläche und rufen darin .text() für den Zielabsatz auf. Dieses eigenständige Node-Beispiel bildet einen Absatz und eine Schaltfläche nach und ruft anschließend den registrierten Handler auf, um den Text vor und nach dem Klick zu zeigen:

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

Verwenden Sie im Browser den Handler mit <p id="title">Text</p> und <button id="press">Text Change</button> und laden Sie jQuery vor dem Skript. Im Absatz steht zunächst „Text“; ein Klick auf die Schaltfläche ändert den Inhalt zu „Text Altered“. Achten Sie darauf, dass die IDs in den Selektoren mit denen der Seitenelemente übereinstimmen, damit der Handler den gewünschten Absatz aktualisiert.