Ratgeber: Ein Kommentar soll als Text erscheinen und keine Seitenelemente erzeugen

Ein Beispieltag verändert die Vorschau

In einer Lernseite schreibt jemand einen Kommentar über HTML und tippt darin „<strong>Beispiel</strong>“. Die Vorschau zeigt plötzlich nur das fett gedruckte Wort. Der Kommentar wurde als Markup interpretiert, obwohl eigentlich sein wörtlicher Inhalt sichtbar sein sollte. Bereits dieses harmlose Beispiel macht eine wichtige Grenze deutlich.

MDN unterscheidet textContent, das Textinhalt setzt, von innerHTML, das HTML verarbeitet. Beim Setzen von textContent werden vorhandene Kindknoten durch einen Textknoten ersetzt. Dieser Ratgeber behandelt bestehende DOM-Technik, geprüft am 14. Oktober 2026. Die Übung dient einer einfachen Textvorschau und ist keine vollständige Sicherheitsprüfung einer Anwendung.

Den vorgesehenen Inhalt zuerst bestimmen

Entscheide für jedes Eingabefeld, ob es gewöhnlichen Text oder bewusst zugelassenen formatierten Inhalt aufnehmen soll. Ein kurzer Kommentar, ein Name oder eine Betreffzeile braucht häufig keine frei eingebbaren HTML-Elemente. Dann sollte die Vorschau den eingegebenen Text wörtlich zeigen. Für einen Rich-Text-Editor gelten andere Anforderungen, die ausdrücklich geplant werden müssen.

Erstelle eine Testliste mit einem normalen Satz, dem genannten Beispieltag, einem kaufmännischen Und und Anführungszeichen. Zeige diese Werte in einem eigens vorgesehenen Textelement an. Vergleiche Eingabe und Darstellung Zeichen für Zeichen. Die Probe lässt sich vollständig lokal durchführen und benötigt weder fremde Inhalte noch einen externen Dienst.

Den richtigen Zielbereich auswählen

Eine Kommentarbox enthält vielleicht neben dem Text auch einen Antwortknopf. Wenn du textContent auf die gesamte Box setzt, verschwinden deren vorhandene Kinder einschließlich des Knopfs. Lege deshalb ein separates Textelement innerhalb der Box an und aktualisiere nur dieses. Die Datenanzeige und die Bedienelemente bleiben so klar getrennt.

Ein passender Bauauftrag lautet: „Freie Kurztexte werden als Text dargestellt. Aktualisiere dafür ausschließlich den vorgesehenen Textbereich. Vorhandene Aktionen bleiben erhalten. Falls formatierte Inhalte erlaubt werden, wird dafür ein gesondertes geprüftes Verfahren definiert.“ Ein Wechsel der DOM-Eigenschaft ersetzt keine Zugriffskontrolle, Uploadprüfung oder serverseitige Datenvalidierung; er löst einen konkreten Darstellungsweg.

Vorschau und gespeicherte Ansicht vergleichen

Prüfe nach der Umsetzung beide Ansichten mit denselben Testwerten. Ein sicher dargestellter Entwurf hilft wenig, wenn die gespeicherte Seite später anders rendert. Kontrolliere außerdem lange Kommentare auf dem Handy und die Bedienbarkeit des Antwortknopfs nach mehreren Aktualisierungen. Die Abnahme ist nachvollziehbar, wenn der freie Text wörtlich erhalten bleibt und seine Darstellung keine unerwarteten Seitenelemente erzeugt oder vorhandene Aktionen entfernt.