Aktualisieren innerHTML mit jQuery

Im heutigen Beitrag erfahren wir, wie Sie den inneren HTML-Code eines Elements in jQuery aktualisieren oder ersetzen.

Aktualisieren von innerHTML mit jQuery

jQuery stellt die Methode .html() bereit, um den HTML-Inhalt jedes Elements in der Menge der übereinstimmenden Elemente festzulegen.

Syntax:

.html(htmlString).html(function)

1. Der htmlString ist ein HTML-String, der als Inhalt jedes übereinstimmenden Elements festgelegt wird.
2. Dies ist eine function, die das HTML-Inhaltsmaterial an das Set zurückgibt. Der alte HTML-Wert und Index des Elements in der Menge werden als Argumente betrachtet.

Vor dem Aufruf der Funktion leert jQuery das Element. Dann verwendet es das alte HTML-Argument, um den alten Inhalt zu konsultieren. this kann sich auf das aktuelle Element innerhalb des Satzes innerhalb der Funktion beziehen.

Wenn .html() verwendet wird, um den Inhalt eines Elements festzulegen, wird jeder Inhalt in diesem Element vollständig durch den neuen Inhalt ersetzt. Darüber hinaus entfernt jQuery andere Konstrukte wie Informationen und Event-Handler aus untergeordneten Elementen, bevor diese Elemente durch brandneue Inhalte ersetzt werden.

Bei dieser Methode wird die Eigenschaft innerHTML des Browsers verwendet.

Einige Browser generieren möglicherweise kein DOM, das die bereitgestellte HTML-Quelle genau repliziert. Verwenden Sie anstelle der Methode .html() die Methode .text(), um den Inhalt eines script-Elements festzulegen, das kein HTML enthält.

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

HTML Quelltext:

<div class="txt-container">Hello World! Welcome to the DelftStack.</div>
<button type="button">Change the text</button>

JavaScript-Code:

$('button').click(() => {
  $('div.txt-container')
      .html('<p>Thank you for visiting <em>DelftStack!</em></p>');
})

Im obigen Beispiel haben wir das Element div definiert, das den Text Hello World! Welcome to the DelftStack. Botschaft. Wenn Sie auf die Schaltfläche Change the text klicken, wird das DOM mit dem neuen Absatz-Tag aktualisiert.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt. Es wird das folgende Ergebnis angezeigt.

Ausgabe vor Textänderung:

Ausgabe nach Änderung des Textes:

Demo ausführen