demo · v150

PI MutationObserver

Use a MutationObserver to watch for ProcessingInstruction nodes (nodeType 7) being added or removed from the DOM. Enter HTML with <?target data?> markup, click Insert — and see the observer fire immediately with the exact PI node details.

PIs added: 0 PIs removed: 0 MutationRecords: 0 PIs in live DOM: 0

Insert markup containing processing instructions

Presets:

Live DOM (observation target)

Empty

Remove individual PIs

MutationObserver callback log

// Watch for ProcessingInstruction nodes via MutationObserver
const target = document.getElementById('container');
const observer = new MutationObserver((mutations) => {
  for (const m of mutations) {
    for (const node of m.addedNodes) {
      if (node.nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
        console.log('PI added:', node.target, '|', node.data);
        // node.target → e.g. "xml-stylesheet"
        // node.data   → e.g. 'href="style.css" type="text/css"'
      }
    }
    for (const node of m.removedNodes) {
      if (node.nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
        console.log('PI removed:', node.target, '|', node.data);
      }
    }
  }
});
observer.observe(target, { childList: true, subtree: true });

// Insert PI via DOMParser
const parser = new DOMParser();
const doc = parser.parseFromString('<?app cfg="v2"?><p>hi</p>', 'text/html');
const piNode = doc.firstChild; // ProcessingInstruction node

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗