new Comment() — Methode · JavaScript-Referenz

Signatur

new Comment(data)

Beschreibung

Der Konstruktor new Comment() erzeugt einen neuen Kommentarknoten, also das DOM-Gegenstück zu  im HTML-Quelltext. Das neue Objekt ist zunächst nicht im Dokument eingehängt. Erst mit Methoden wie append(), appendChild(), before() oder insertBefore() wird es Teil des DOM-Baums.

Funktional entspricht der Aufruf document.createComment(data). Der Konstruktor ist aber kürzer und erzeugt den Knoten immer im Kontext des globalen document des aktuellen Fensters. Die Klasse Comment erbt von CharacterData. Deshalb stehen Eigenschaften wie data, length und nodeValue sowie Methoden wie appendData(), replaceData() oder remove() zur Verfügung.

Typische Einsatzfälle:

Platzhalter- oder Anker-Knoten in eigenen Template- und Rendering-Bibliotheken. Frameworks wie Vue, Lit oder Svelte nutzen Kommentare als unsichtbare Markierungen für bedingt gerenderte Blöcke.
Debug-Markierungen im DOM, die in den Entwicklertools sichtbar sind, die Darstellung aber nicht verändern.
Erzeugen von Kommentaren beim Aufbau von XML- oder HTML-Dokumenten, die später serialisiert werden.

Kommentarknoten werden nicht angezeigt und nehmen nicht am Layout teil. children und querySelector() ignorieren sie. childNodes und TreeWalker (mit NodeFilter.SHOW_COMMENT) erfassen sie dagegen.

Parameter

Name	Typ	Default	Beschreibung
$data	string	""	Textinhalt des Kommentars. Werte, die keine Strings sind, werden in einen String umgewandelt (z. B. `42` → `"42"`, `null` → `"null"`). Ohne Argument ist der Kommentar leer.

Rückgabewert

Typ

Comment

Beschreibung

Ein neues, noch nicht eingehängtes Comment-Objekt mit nodeType === Node.COMMENT_NODE (8) und nodeName === "#comment".

Beispiele

Kommentar erzeugen und Eigenschaften prüfen

const kommentar = new Comment('Hier beginnt der Hauptinhalt');

console.log(kommentar.data);
console.log(kommentar.nodeType === Node.COMMENT_NODE);
console.log(kommentar.nodeName);
console.log(kommentar.length);

// Ohne Argument entsteht ein leerer Kommentar
console.log(new Comment().data === '');

Hier beginnt der Hauptinhalt true #comment 28 true

Kommentar ins DOM einfügen und serialisieren

const main = document.createElement('main');
main.append(
  new Comment(' Header-Bereich '),
  Object.assign(document.createElement('h1'), { textContent: 'Willkommen' })
);

document.body.append(main);
console.log(main.outerHTML);
// Kommentare zählen zu childNodes, aber nicht zu children
console.log(main.childNodes.length, main.children.length);

<main><h1>Willkommen</h1></main> 2 1

Kommentar als unsichtbarer Anker für bedingtes Rendern

const container = document.createElement('div');
document.body.append(container);

// Anker markiert die Stelle, an der der Block erscheinen soll
const anker = new Comment('if:hinweis');
container.append(anker);

let hinweis = null;

const zeigeHinweis = (sichtbar) => {
  if (sichtbar && !hinweis) {
    hinweis = document.createElement('p');
    hinweis.textContent = 'Neue Nachrichten verfügbar!';
    anker.after(hinweis); // direkt hinter dem Anker einfügen
  } else if (!sichtbar && hinweis) {
    hinweis.remove();
    hinweis = null;
  }
};

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

<p>Neue Nachrichten verfügbar!</p>

Alle Kommentare eines Elements mit TreeWalker finden

const box = document.createElement('section');
box.append(new Comment('A'), document.createElement('span'), new Comment('B'));

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

[ 'A', 'B' ]

// Wichtig · Fallstricke

new ist Pflicht: Ein Aufruf als Comment('x') ohne new wirft einen TypeError.
Kein Escaping von -->: Der Inhalt wird nicht maskiert. Enthält data die Zeichenfolge -->, entsteht beim Serialisieren über innerHTML oder outerHTML ungültiges Markup: Der Kommentar endet vorzeitig, und der restliche Text wird beim erneuten Parsen als HTML gelesen. Nutzereingaben deshalb nie ungeprüft in Kommentare schreiben, wenn das Ergebnis später wieder als HTML geparst wird (XSS-Gefahr). Im DOM selbst ist der Knoten harmlos, denn er wird nicht ausgeführt.
Kein Ort für Geheimnisse: Kommentare sind im DOM und in den Entwicklertools für alle sichtbar. Vertrauliche Daten gehören nicht hinein.
Dokumentkontext: Der Konstruktor gehört immer zum document des aktuellen Fensters. Für andere Dokumente, etwa aus DOMParser oder document.implementation.createHTMLDocument(), besser otherDoc.createComment() verwenden. Alternativ fügt man den Knoten einfach ein, dann übernimmt adoptNode ihn automatisch.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt, nicht aber vom Internet Explorer. Dort (und für maximale Kompatibilität) document.createComment() verwenden. In Node.js gibt es den Konstruktor nur über DOM-Implementierungen wie jsdom.

Siehe auch

Comment new Text() new CommandEvent() new DOMRect() new Document()