Document.createComment() — Methode · JavaScript-Referenz

Signatur

Document.prototype.createComment(data)

Beschreibung

document.createComment() erzeugt einen Kommentarknoten (Comment, nodeType === 8), der im Markup als  erscheint. Der neue Knoten gehört zum aufrufenden Dokument (ownerDocument), ist aber zunächst nicht im DOM-Baum. Du musst ihn erst mit Methoden wie append(), appendChild(), before() oder insertBefore() einfügen.

Kommentare werden nicht dargestellt. Sie eignen sich daher gut als unsichtbare Platzhalter (Anker). Viele Template-Engines und Frameworks (z. B. Vue, Lit, Angular) setzen Kommentarknoten an Stellen, an denen später dynamisch Inhalte eingehängt oder bedingt entfernt werden. Weitere Einsatzzwecke sind Debug-Markierungen im DOM und das Erzeugen von Kommentaren in XML-Dokumenten.

Der Text ist später über comment.data, comment.nodeValue oder comment.textContent les- und änderbar. Kommentarknoten werden von children und querySelector() nicht erfasst, wohl aber von childNodes, firstChild und einem TreeWalker mit NodeFilter.SHOW_COMMENT.

Parameter

Name	Typ	Default	Beschreibung
$data Pflicht	string		Textinhalt des Kommentars. Andere Werte werden in einen String umgewandelt (z. B. `42` → `"42"`). Ohne Argument wirft der Aufruf einen `TypeError`.

Rückgabewert

Typ

Comment

Beschreibung

Ein neuer, noch nicht eingefügter Comment-Knoten, dessen data dem übergebenen Text entspricht.

Beispiele

Kommentar erzeugen und einfügen

const kommentar = document.createComment('Navigation beginnt hier');
const nav = document.createElement('nav');

document.body.append(kommentar, nav);

console.log(kommentar.nodeType);        // 8 = Node.COMMENT_NODE
console.log(kommentar.data);
console.log(document.body.innerHTML.includes('<!--Navigation beginnt hier-->'));

8 Navigation beginnt hier true

Kommentar als Anker für bedingtes Rendern

// Platzhalter merkt sich die Position, auch wenn das Element entfernt ist
const container = document.createElement('div');
document.body.append(container);

const anker = document.createComment('hinweis-slot');
container.append(anker);

const hinweis = document.createElement('p');
hinweis.textContent = 'Du hast ungespeicherte Änderungen.';

const zeigeHinweis = (sichtbar) => {
  if (sichtbar && !hinweis.isConnected) {
    anker.after(hinweis);
  } else if (!sichtbar) {
    hinweis.remove();
  }
};

zeigeHinweis(true);
console.log(container.innerHTML);
zeigeHinweis(false);
console.log(container.innerHTML);

<p>Du hast ungespeicherte Änderungen.</p>

Alle Kommentare eines Elements finden

const liste = document.createElement('ul');
liste.append(
  document.createComment('Build: 2024-05-01'),
  document.createElement('li'),
  document.createComment('TODO: Einträge laden')
);

const walker = document.createTreeWalker(liste, NodeFilter.SHOW_COMMENT);
const texte = [];
while (walker.nextNode()) {
  texte.push(walker.currentNode.data);
}
console.log(texte);

["Build: 2024-05-01", "TODO: Einträge laden"]

// Wichtig · Fallstricke

Kein Escaping: Der Text wird unverändert übernommen. Die Zeichenfolge --> im Text wirft zwar keinen Fehler, bei der Serialisierung über innerHTML/outerHTML entsteht dann aber ein Kommentar, der zu früh endet. Wird dieses HTML erneut geparst, kann der Rest als echtes Markup gelesen werden. Setze nicht vertrauenswürdige Benutzereingaben daher nie ungeprüft in Kommentare, wenn das Ergebnis serialisiert und wieder eingelesen wird (XSS-Risiko).
Sichtbar im Quelltext: Kommentare sind in den Entwicklerwerkzeugen und im serialisierten HTML für alle lesbar. Speichere dort keine vertraulichen Daten.
Nicht in children: children, childElementCount und querySelectorAll() ignorieren Kommentare, childNodes dagegen nicht. Das ist ein häufiger Grund für falsche Indizes beim Durchlaufen von Knoten.
In XML-Dokumenten ist -- im Kommentartext laut XML-Spezifikation nicht erlaubt. XMLSerializer kann in diesem Fall einen Fehler werfen oder ungültiges XML liefern.
Diese Methode wird von allen Browsern seit Langem unterstützt. Alternativ kannst du auch new Comment(text) verwenden (moderne Browser).

Siehe auch

Comment Document.createElement() Document.createEvent() Document.createElementNS() Document.createRange()