jQuery / Methode / .html() - Elementinhalte lesen oder ersetzen

jQuerys .html() liest ohne Argument die innere HTML-Zeichenkette des ersten ausgewählten Elements. Eine übergebene Zeichenkette ersetzt die inneren Inhalte aller ausgewählten Elemente; die äußeren Elemente bleiben. Für Benutzereingaben als Zeichen verwenden Sie .text(), statt sie mit .html() als HTML interpretieren zu lassen.

Lesen, Schreiben, text und val

Die .html()-API liefert beim Lesen eine Zeichenkette, beim Schreiben ein jQuery-Objekt. Inneres HTML ist die vom Browser erzeugte Zeichenkettendarstellung des Document Object Model (DOM). Sie muss Leerzeichen und Tags der Quelldatei nicht exakt wiedergeben.

.text() interpretiert die Zeichenkette nicht als Tags. Aktuelle input- und textarea-Werte sind kein inneres HTML; nutzen Sie .val(). Bei leerer Auswahl liefert der .html()-Getter undefined. Prüfen Sie vor anschließenden Zeichenkettenmethoden, ob ein Element existiert.

Vollständiges Beispiel für HTML und Text

Speichern Sie alles in UTF-8 als html-demo.html und öffnen Sie es im Browser. Zum Laden der offiziellen jQuery-Datei 4.0.0 vom Content Delivery Network (CDN) brauchen Sie Internet, aber keine Paketinstallation. Lesen, Ersetzen, Eingabeanzeige, Reset und die Konsolenbeispiele wurden mit 3.7.1 und 4.0.0 ausgeführt.

Der erste Kasten enthält Alpha in strong, der zweite Beta in em. Auch der Bericht verwendet .text(), sodass gelesenes HTML als Zeichenkette erscheint und dort nicht interpretiert wird.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read and replace HTML contents</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, input { font: inherit; margin: 4px; max-width: 100%; }
    .box { border: 2px solid teal; padding: 16px; margin: 12px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>HTML markup versus plain text</h1>
  <button type="button" id="read">Read</button>
  <button type="button" id="replace">Replace with fixed HTML</button>
  <label>Message <input id="message" value="&lt;b&gt;Hello&lt;/b&gt;"></label>
  <button type="button" id="plain">Show message as text</button>
  <button type="button" id="reset">Reset</button>
  <div id="examples">
    <div class="box"><strong>Alpha</strong></div>
    <div class="box"><em>Beta</em></div>
  </div>
  <p>Delegated clicks: <span id="clicks">0</span></p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const $boxes = $(".box");
      const initial = $boxes.get().map(node => node.innerHTML);
      let clicks = 0;
      function report() {
        $("#result").text(`first html=${$boxes.html()}\ncombined text=${$boxes.text()}\nboxes=${$boxes.length}`);
      }
      $("#read").on("click", report);
      $("#replace").on("click", function () {
        $boxes.html('<button type="button" class="child">New</button>');
        report();
      });
      $("#plain").on("click", function () {
        $boxes.text($("#message").val());
        report();
      });
      $("#examples").on("click.htmlLesson", ".child", function () {
        clicks++;
        $("#clicks").text(clicks);
      });
      $("#reset").on("click", function () {
        $boxes.html(function (index) { return initial[index]; });
        $("#message").val("<b>Hello</b>");
        clicks = 0;
        $("#clicks").text(clicks);
        report();
      });
      report();
    });
  </script>
</body>
</html>

Anfangs kommt HTML nur aus Alpha, der Text kombiniert beide Kästen:

first html=<strong>Alpha</strong>
combined text=AlphaBeta
boxes=2

1. Read liest den aktuellen Zustand. first html enthält nicht das umgebende div.
2. Replace with fixed HTML ersetzt beide Inhalte durch New-Buttons. Zwei Kästen bleiben; combined text ist NewNew.
3. Jeder New-Button erhöht Delegated clicks. Auch nach erneutem Ersatz zählt ein Klick einmal.
4. Show message as text zeigt <b>Hello</b> samt Tagzeichen in beiden Kästen. Es entsteht kein b-Element.
5. Ändern Sie Message und wiederholen Sie. Dieser Weg liest mit .val() und übergibt an .text().
6. Reset stellt gespeichertes HTML jedes Kastens, Eingabe und null Klicks wieder her. Der äußere delegierte Handler wird nicht neu registriert.

Ungeprüfte Eingaben nicht als HTML einsetzen

HTML interpretierende Methoden können neben Tags auch ausführbare Attribute oder Skripte aufnehmen. Ungeprüfte Eingaben direkt an .html() zu übergeben kann Cross-Site Scripting (XSS) ermöglichen. Der Ersatzbutton nutzt ausschließlich eine feste, vom Entwickler vorgegebene Zeichenkette; Message wird als Text behandelt.

Eine Serverantwort ist nicht automatisch vertrauenswürdig. Für Kommentare, Suchbegriffe oder externe Daten als Zeichen nutzen Sie .text(). Wenn fremdes formatiertes HTML nötig ist, planen Sie erlaubte Elemente/Attribute und bewährte Bereinigung gesondert. Einfache Zeichenkettenersetzung oder Entfernung weniger Tags ist kein vollständiger Schutz.

Ereignisse und Daten ersetzter Kinder

.html(newHtml) ersetzt vorhandene Inhalte vollständig, statt anzuhängen. Alte Kinder samt jQuery-Daten und direkten Handlern werden bereinigt. Führen Sie diesen vollständigen Teilcode in der Entwicklerkonsole aus. Er erzeugt einen temporären Behälter und entfernt ihn am Ende.

const $host = $('<div><button class="child">Old</button></div>').appendTo("body");
const $old = $host.find("button");
let direct = 0;
let delegated = 0;
$old.data("token", "stored").on("click", () => direct++);
$host.on("click", ".child", () => delegated++);
$host.html('<button class="child">New</button>');
$host.find("button").trigger("click");
console.log(`direct=${direct} | delegated=${delegated}`);
console.log(`old attached=${document.contains($old[0])} | old data=${typeof $old.data("token")}`);
$host.remove();

direct=0 | delegated=1
old attached=false | old data=undefined

Der neue Button hat den alten direkten Handler nicht: direct bleibt null. Der Elternteil bleibt bestehen und sein delegierter .on()-Handler behandelt das neue .child, sodass delegated eins wird. Trotz $old-Referenz steht der alte Knoten nicht im Dokument; token ist undefined. Ein Ersatz des Elternteils selbst würde dessen delegierten Handler nicht bewahren.

Mit einer Funktion Inhalte je Element erzeugen

.html(function(index, oldHtml)) erhält den nullbasierten Index und das alte HTML und liefert eine neue Zeichenkette. Nutzen Sie oldHtml für vorherige Inhalte im Rückruf. Dieses Konsolenbeispiel ergänzt feste A/B-Inhalte um nummerierte spans.

const $boxes = $("<div><b>A</b></div><div><i>B</i></div>");
$boxes.html(function (index, oldHtml) {
  return oldHtml + "<span>" + (index + 1) + "</span>";
});
console.log($boxes.get().map(node => node.innerHTML).join(" | "));
console.log(`empty getter=${typeof $().html()}`);
$boxes.remove();

<b>A</b><span>1</span> | <i>B</i><span>2</span>
empty getter=undefined

oldHtml wird nicht automatisch sicher. Verwenden Sie bekannte Inhalte wie hier und erweitern Sie das Muster nicht um fremde Eingaben. Prüfen Sie bei ausbleibender Änderung Selektorbereich, vorhandenes Ziel, gewünschte innere Struktur, Network-Laden und Console-Fehler. Sollten Sie eigentlich anhängen wollen, prüfen Sie erneut, ob vollständiges Ersetzen durch .html() passt.