JavaScript Document createProcessingInstruction() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word CREATEPROCESSINGINSTRUCTION

Definition

document.createProcessingInstruction(target, data) creates a ProcessingInstruction node — the DOM form of <?target data?> in XML (for example xml-stylesheet). You usually insert it into an XML document with insertBefore (MDN).

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.createProcessingInstruction. Start with this line.

JavaScript
doc.createProcessingInstruction(target, data)
CallWhat it does
doc.createProcessingInstruction(target, data)Primary signature.
document.createProcessingInstruction(...)Call with the arguments your case needs.

Built into the browser. Call createProcessingInstruction(...) on document — no import required.

Library declarations
JavaScript
doc.createProcessingInstruction(target, data)

Parameters

ParameterDescription
targetRequired. Valid XML name (first part of <?…?>)
dataRequired. Payload after the target — must not contain ?>

Return Value

Return ValueDescription
*ProcessingInstruction (not yet in the tree)

JavaScript Examples

Example 1 — Create xml-stylesheet and Serialize

MDN pattern: create a PI, insert it before the document element, serialize.

JavaScript
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/>
Try It Yourself

How It Works

  1. Parse XML. application/xml builds a real XML document.
  2. Create the PI. Target is xml-stylesheet; data holds the attributes.
  3. Insert first. insertBefore(pi, firstChild) places it above <foo/>.
  4. Serialize. XMLSerializer prints the <?…?> form.

Example 2 — Read target and data

Inspect the node fields before you attach it to the tree.

JavaScript
const doc = new DOMParser().parseFromString("<root/>", "application/xml");
const pi = doc.createProcessingInstruction("custom-pi", "version=1");

console.log(pi.target);           // "custom-pi"
console.log(pi.data);             // "version=1"
console.log(pi.nodeName);         // "custom-pi"
console.log(pi.nodeType);         // 7 (PROCESSING_INSTRUCTION_NODE)
Try It Yourself

How It Works

  1. Create on an XML doc so the method matches MDN’s host document.
  2. target is the instruction name; data is the payload.
  3. nodeName matches the target for processing instructions.
  4. nodeType is 7 (Node.PROCESSING_INSTRUCTION_NODE).

Example 3 — Catch InvalidCharacterError

MDN: data must not include the closing sequence ?>.

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

try {
  doc.createProcessingInstruction("bad", "x ?> y");
} catch (err) {
  console.log(err.name); // InvalidCharacterError
}
Try It Yourself

How It Works

  1. Closing sequence. ?> ends a PI in XML markup.
  2. Guard in the API. Including it in data throws InvalidCharacterError.
  3. Also invalid: a target that is not a valid XML name (MDN).
  4. Use try/catch when targets or data come from user input.
Compatibility

Browser Support

Document.createProcessingInstruction() is a browser DOM API marked Baseline Widely available on MDN (since July 2015).

✓ Baseline Widely available

Document.createProcessingInstruction()

Create ProcessingInstruction nodes for XML. Use DOMParser + XMLSerializer in demos.

Baseline Widely available
Google Chrome All modern versions
Yes
Microsoft Edge All modern versions
Yes
Mozilla Firefox All modern versions
Yes
Apple Safari All modern versions
Yes
Opera All modern versions
Yes
Internet Explorer IE 9+ (XML)
Yes
createProcessingInstruction() Excellent in browsers

Bottom line: Safe in modern browsers for XML workflows. See the MDN createProcessingInstruction() reference.

Frequently Asked Questions

It creates a new ProcessingInstruction node from a target string and a data string (MDN). You usually insert it into an XML document — for example with insertBefore.
No. MDN marks Document.createProcessingInstruction() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A ProcessingInstruction node. Read pi.target and pi.data (or nodeValue / textContent for the data).
Serialized form is <?target data?>. MDN’s example builds an xml-stylesheet PI before the document element.
MDN: InvalidCharacterError if target is not a valid XML name, or if data contains the closing sequence ?>.
Processing instructions are an XML concept. MDN shows creating them on an XML Document from DOMParser (application/xml). Everyday HTML UIs rarely need them.

Next: createRange()

Learn how to create a Range for selections and DOM surgery.

createRange() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

15 people found this page helpful

JavaScript Document createNSResolver() Method JavaScript Document createRange() Method