JavaScript Document createProcessingInstruction() Method

What You’ll Learn

document.createProcessingInstruction() is an instance method that builds a ProcessingInstruction node (see MDN Document: createProcessingInstruction()). Learn target and data, the MDN xml-stylesheet example, validation exceptions, how to insert and serialize the node, and five try-it labs.

Introduction

In XML, a processing instruction (PI) is a special node that carries a message to an application. Serialized, it looks like <?xml-stylesheet href="mycss.css"?> — not an element, not a comment.

doc.createProcessingInstruction(target, data) creates that node in memory. MDN notes you usually insert it into an XML document (for example with insertBefore) so serializers and tools can see it.

Everyday HTML pages rarely need PIs. This API shines when you build or edit XML documents (often from DOMParser).

Related tutorials: createComment(), createCDATASection(), createElement().

Understanding document.createProcessingInstruction()

An instance method on a Document (call it on the XML document you will mutate; MDN).

• target — first part of the PI (for example xml-stylesheet) (MDN).
• data — remaining information after the target; must not contain ?> (MDN).
• Return value — a new ProcessingInstruction node.
• Properties — read pi.target and pi.data.
• nodeType — Node.PROCESSING_INSTRUCTION_NODE (7).
• Attach — insert into the XML tree before the node is useful in output (MDN).

📝 Syntax

General form of Document.createProcessingInstruction (MDN):

createProcessingInstruction(target, data)

Parameters

• target — string for the PI target (the name after <?) (MDN). Must be a valid XML name.
• data — string of information after the target (MDN). Cannot include the closing sequence ?>.

Return value

A new ProcessingInstruction node (ready to insert into an XML document).

Exceptions

• InvalidCharacterError — MDN: thrown if target is not a valid XML name, or if data contains ?>.

MDN example

const doc = new DOMParser().parseFromString("<foo />", "application/xml");
const pi = doc.createProcessingInstruction(
  "xml-stylesheet",
  'href="mycss.css" type="text/css"',
);

doc.insertBefore(pi, doc.firstChild);

console.log(new XMLSerializer().serializeToString(doc));
// <?xml-stylesheet href="mycss.css" type="text/css"?><foo/>

⚖️ Processing instructions vs related nodes

Examples Gallery

Examples follow MDN Document: createProcessingInstruction() and practical XML PI patterns.

const doc = new DOMParser().parseFromString("<foo />", "application/xml");
const pi = doc.createProcessingInstruction(
  "xml-stylesheet",
  'href="mycss.css" type="text/css"',
);

doc.insertBefore(pi, doc.firstChild);

console.log(new XMLSerializer().serializeToString(doc));
// <?xml-stylesheet href="mycss.css" type="text/css"?><foo/>

<?xml-stylesheet href="mycss.css" type="text/css"?><foo/>

const doc = new DOMParser().parseFromString("<root/>", "application/xml");
const pi = doc.createProcessingInstruction("php", 'echo "hi";');

console.log(pi.target); // "php"
console.log(pi.data);   // 'echo "hi";'
console.log(pi.nodeName); // "php" (same as target for PI nodes)

php
echo "hi";
php

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

try {
  doc.createProcessingInstruction("note", "oops ?> still open");
} catch (err) {
  console.log(err.name); // "InvalidCharacterError"
}

InvalidCharacterError

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

try {
  doc.createProcessingInstruction("1bad", "data");
} catch (err) {
  console.log(err.name); // "InvalidCharacterError"
}

const ok = doc.createProcessingInstruction("xml-stylesheet", 'href="a.css"');
console.log(ok.target); // "xml-stylesheet"

InvalidCharacterError
xml-stylesheet

const doc = new DOMParser().parseFromString("<root/>", "application/xml");
const pi = doc.createProcessingInstruction("app", "mode=debug");

console.log(pi.nodeType); // 7
console.log(pi.nodeType === Node.PROCESSING_INSTRUCTION_NODE); // true
console.log(pi instanceof ProcessingInstruction); // true

7
true
true

🚀 Common Use Cases

• xml-stylesheet links — associate CSS/XSLT with XML (MDN example).
• XML tool pipelines — inject PIs that downstream processors understand.
• Serializing XML — round-trip documents with XMLSerializer.
• Teaching XML node types — contrast PIs with comments and elements.
• Not for typical HTML UI — prefer elements, comments, or metadata tags in HTML.
• Validation-aware builders — catch illegal targets / ?> early.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• Usually used with XML documents; insert before the node is useful (MDN).
• Data must not contain ?>; target must be a valid XML name (MDN).
• Call the method on the same document you plan to insert into.
• Related: createComment(), createCDATASection(), nodeType.

💡 Best Practices