MutationObserver — interactive playground

<div class="pg">
    <h1 class="pg-title">👁️ MutationObserver live</h1>
    <p class="pg-sub">
      A single <code>MutationObserver</code> watches the target element below
      for every type of mutation. Use the controls to trigger changes — each one
      fires the observer and appears in the log with its full <code>MutationRecord</code>.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Observed target element</div>
      <div class="label" style="margin-bottom:6px">
        This element is being watched with
        <code>{ childList: true, attributes: true, characterData: true, subtree: true }</code>
      </div>
      <div class="demo-target" id="target">
        <span class="child-tag" data-id="1">child-1 <button onclick="removeChild('1')">✕</button></span>
        <span class="child-tag" data-id="2">child-2 <button onclick="removeChild('2')">✕</button></span>
      </div>
      <div class="counter-row">
        <span>Children: <strong id="childCount">2</strong></span>
        <span>data-status: <strong id="attrDisplay">none</strong></span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Trigger mutations</div>

<div class="label" style="margin-bottom:6px">childList — add or remove a child node</div>
      <div class="btn-row">
        <button class="btn primary sm" onclick="addChild()">+ Add child</button>
        <button class="btn sm" onclick="removeLastChild()">− Remove last child</button>
        <button class="btn sm" onclick="addManyChildren()">Add 5 at once (batched)</button>
      </div>

<div class="label" style="margin-top:14px; margin-bottom:6px">attributes — change an attribute on the target</div>
      <div class="attr-row">
        <input type="text" id="attrVal" placeholder="new data-status value…" maxlength="40" />
        <button class="btn primary sm" onclick="changeAttr()">Set data-status</button>
        <button class="btn sm" onclick="removeAttr()">Remove attr</button>
      </div>

<div class="label" style="margin-top:14px; margin-bottom:6px">characterData — edit a text node directly</div>
      <div class="btn-row">
        <button class="btn primary sm" onclick="changeTextNode()">Append text node</button>
        <button class="btn sm" onclick="clearTextNodes()">Clear text nodes</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label">
        <span class="n">3</span> MutationRecord log
        <button class="btn sm" style="margin-left:auto;font-size:0.72rem" onclick="clearLog()">Clear</button>
      </div>
      <div class="log" id="log">
        <div class="empty">No mutations yet — use the controls above…</div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The code running this demo</div>
      <div class="code">const target = document.getElementById('target');
let counter = 3;

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // mutation.type  → 'childList' | 'attributes' | 'characterData'
    // mutation.target      → the node that changed
    // mutation.addedNodes  → NodeList of added nodes (childList only)
    // mutation.oldValue    → previous value (if attributeOldValue/
    //                        characterDataOldValue was set)
    logMutation(mutation);
  }
});

observer.observe(target, {
  childList: true,
  subtree: true,
  attributes: true,
  characterData: true,
  attributeOldValue: true,
  characterDataOldValue: true,
});</div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">5</span> Why not just poll?</div>
      <table class="vs-table">
        <thead>
          <tr>
            <th>Aspect</th>
            <th class="good">MutationObserver</th>
            <th class="bad">setInterval polling</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="row-label">Timing</td>
            <td class="good">Fires immediately after the change</td>
            <td class="bad">Up to N ms late (interval gap)</td>
          </tr>
          <tr>
            <td class="row-label">CPU when idle</td>
            <td class="good">Zero — no polling cost</td>
            <td class="bad">Runs every tick regardless</td>
          </tr>
          <tr>
            <td class="row-label">Batching</td>
            <td class="good">Multiple changes → one callback</td>
            <td class="bad">No batching; multiple checks may run</td>
          </tr>
          <tr>
            <td class="row-label">Detail</td>
            <td class="good">Full record: type, target, old value</td>
            <td class="bad">Must diff DOM yourself</td>
          </tr>
          <tr>
            <td class="row-label">Cleanup</td>
            <td class="good"><code>observer.disconnect()</code></td>
            <td class="bad"><code>clearInterval()</code> (easy to forget)</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.