JavaScript Document createCDATASection() Method

What You’ll Learn

document.createCDATASection() is an instance method that creates a CDATA section node for XML documents (see MDN Document: createCDATASection()). Learn the MDN DOMParser example, why HTML pages throw NOT_SUPPORTED_ERR, the forbidden ]]> sequence, and when createTextNode() is enough — with five try-it labs.

Introduction

In XML, a CDATA section wraps raw text so characters like < and & are treated literally. In serialized XML it looks like:

<script><![CDATA[ if (a < b && c) alert("ok"); ]]></script>

MDN: createCDATASection(data) creates that kind of node in memory. You typically append it to an XML element with appendChild(), then serialize with XMLSerializer.

Related tutorials: nodeType, textContent, append().

Understanding document.createCDATASection()

An instance method on a Document object — usually an XML document from DOMParser, not the HTML page document (MDN).

• Parameter — data: string for the CDATA content (MDN).
• Return value — a CDATASection node (MDN).
• nodeType — Node.CDATA_SECTION_NODE (4).
• HTML — throws NOT_SUPPORTED_ERR (MDN).
• Forbidden — data must not contain the literal ]]> (MDN).
• Alternative — createTextNode() often suffices (MDN).

📝 Syntax

General form of Document.createCDATASection (MDN):

createCDATASection(data)

Parameters

• data — string containing the CDATA content (MDN).

Return value

A CDATA Section node (MDN).

MDN example (XML document)

const doc = new DOMParser().parseFromString("<xml></xml>", "application/xml");
const cdata = doc.createCDATASection("Some <CDATA> data & then some");
doc.querySelector("xml").appendChild(cdata);

console.log(new XMLSerializer().serializeToString(doc));
// <xml><![CDATA[Some <CDATA> data & then some]]></xml>

⚖️ createCDATASection vs related node creators

Examples Gallery

Examples follow MDN Document: createCDATASection(). Demos use DOMParser so they work inside HTML try-it pages.

const doc = new DOMParser().parseFromString("<xml></xml>", "application/xml");
const cdata = doc.createCDATASection("Some <CDATA> data & then some");
doc.querySelector("xml").appendChild(cdata);

console.log(new XMLSerializer().serializeToString(doc));
// <xml><![CDATA[Some <CDATA> data & then some]]></xml>

<xml><![CDATA[Some <CDATA> data & then some]]></xml>

const doc = new DOMParser().parseFromString("<root/>", "application/xml");
const cdata = doc.createCDATASection("payload");

console.log(cdata.nodeType === Node.CDATA_SECTION_NODE); // true
console.log(cdata.nodeName);  // "#cdata-section"
console.log(cdata.nodeValue); // "payload"

true
#cdata-section
payload

try {
  document.createCDATASection("test"); // HTML document
} catch (err) {
  console.log(err.name); // "NotSupportedError" (NOT_SUPPORTED_ERR)
}

NotSupportedError

const doc = new DOMParser().parseFromString("<root/>", "application/xml");

try {
  doc.createCDATASection("bad ]]> sequence");
} catch (err) {
  console.log(err.name); // InvalidCharacterError
}

InvalidCharacterError

const doc = new DOMParser().parseFromString("<msg/>", "application/xml");
const root = doc.documentElement;

// Text node — works in HTML and XML
const text = doc.createTextNode("Hello & welcome");
root.appendChild(text);

console.log(new XMLSerializer().serializeToString(doc));
// Text is escaped in XML output: Hello &amp; welcome

<msg>Hello &amp; welcome</msg>

🚀 Common Use Cases

• XML config / RSS feeds — embed raw markup or scripts in XML safely.
• SVG/XML tooling — build documents programmatically with literal text.
• Teaching DOM node types — contrast CDATA vs Text vs Comment.
• Not for HTML SPAs — use createTextNode or textContent instead.
• Serialization pipelines — pair with XMLSerializer (MDN example).
• Legacy XML APIs — maintain scripts that still emit CDATA sections.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• XML documents only — HTML throws NOT_SUPPORTED_ERR (MDN).
• Data must not contain ]]> (MDN).
• createTextNode() is often sufficient (MDN).
• nodeType is 4 (CDATA_SECTION_NODE).
• Related: nodeType, textContent, append().

💡 Best Practices