JavaScript Document createComment() Method

What You’ll Learn

document.createComment() is an instance method that creates a new comment node (see MDN Document: createComment()). Learn the data parameter, how comments appear as <!-- ... -->, inserting with append() or appendChild, and how comments differ from visible elements — with five try-it labs.

Introduction

HTML comments in markup look like this:

<!-- TODO: refactor this section -->

With JavaScript, document.createComment(data) builds the same kind of node in memory. MDN: it creates a new comment node and returns it.

Related tutorials: createCDATASection(), nodeType, append().

Understanding document.createComment()

An instance method on any Document object — including the live HTML page document (MDN).

• Parameter — data: string for the comment text (MDN).
• Return value — a new Comment object (MDN).
• nodeType — Node.COMMENT_NODE (8).
• nodeName — "#comment".
• Content — read via nodeValue or textContent.
• Attach — appendChild, insertBefore, or append.

📝 Syntax

General form of Document.createComment (MDN):

createComment(data)

Parameters

• data — string containing the comment text (MDN).

Return value

A new Comment object (MDN).

MDN XML example

const doc = new DOMParser().parseFromString("<xml></xml>", "application/xml");
const comment = doc.createComment(
  "This is a not-so-secret comment in your document"
);
doc.querySelector("xml").appendChild(comment);

console.log(new XMLSerializer().serializeToString(doc));
// <xml><!--This is a not-so-secret comment in your document--></xml>

HTML page example

const note = document.createComment("Loaded by script");
document.body.appendChild(note);
console.log(note.textContent); // "Loaded by script"

⚖️ createComment vs related node creators

Examples Gallery

Examples follow MDN Document: createComment() and show HTML and XML usage.

const doc = new DOMParser().parseFromString("<xml></xml>", "application/xml");
const comment = doc.createComment(
  "This is a not-so-secret comment in your document"
);
doc.querySelector("xml").appendChild(comment);

console.log(new XMLSerializer().serializeToString(doc));

<xml><!--This is a not-so-secret comment in your document--></xml>

const comment = document.createComment("Added by JavaScript");
document.getElementById("host").appendChild(comment);

console.log(comment.textContent);
// Page UI unchanged — check DevTools for #comment node

Added by JavaScript

const comment = document.createComment("debug marker");

console.log(comment.nodeType === Node.COMMENT_NODE); // true
console.log(comment.nodeName);  // "#comment"
console.log(comment.nodeValue); // "debug marker"

true
#comment
debug marker

const list = document.getElementById("list");
const marker = document.createComment("Start of list");

list.insertBefore(marker, list.firstChild);

console.log(list.firstChild.nodeName); // "#comment"
console.log(list.firstChild.textContent); // "Start of list"

#comment
Start of list

const doc = new Document();
doc.append(doc.createComment("root note"));
doc.append(document.createElement("html"));

console.log(doc.childNodes.length); // 2
console.log(doc.firstChild.nodeName); // "#comment"

2
#comment

🚀 Common Use Cases

• Build-time markers — leave notes in programmatically generated HTML.
• Template engines — insert comment nodes during DOM construction.
• Debugging — mark sections in the tree (visible in DevTools).
• XML pipelines — MDN XML example with XMLSerializer.
• Not for secrets — comments are readable in source and DevTools.
• Not for UI text — use createTextNode or elements instead.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• Works on HTML and XML documents (unlike createCDATASection).
• Comments do not render in the page UI.
• Do not store sensitive data in comments.
• nodeType is 8 (COMMENT_NODE).
• Related: append(), nodeType, createCDATASection().

💡 Best Practices