createProcessingInstruction() generates a new processing instruction node and returns it.

The new node usually will be inserted into an XML document in order to accomplish anything with it, such as with node.insertBefore.


createProcessingInstruction(target, data)


  • piNode is the resulting ProcessingInstruction node.
  • target is a string containing the first part of the processing instruction (i.e., <?target … ?>)
  • data is a string containing any information the processing instruction should carry, after the target. The data is up to you, but it can't contain ?>, since that closes the processing instruction.

Return value

None (undefined).


InvalidCharacterError DOMException

Thrown if either of the following are true:

  • The target value is not a valid XML name; for example, it starts with a number, hyphen, or period, or contains characters other than alphanumeric characters, underscores, hyphens, or periods.
  • The closing processing instruction sequence (?>) is part of the data value.


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

doc.insertBefore(pi, doc.firstChild);

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


DOM Standard
# ref-for-dom-document-createprocessinginstruction①

Browser compatibility

BCD tables only load in the browser