How would you use MutationObserver to detect when a third-party script injects new nodes into the DOM?

Q: How would you use MutationObserver to detect when a third-party script injects new nodes into the DOM?

**Target Audience:** Engineers preparing for JavaScript fundamentals interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every claim below was actually run against a real jsdom document — jsdom, unlike ResizeObserver/IntersectionObserver (covered in this bank's own dedicated questions), genuinely does implement MutationObserver, confirmed directly. ## 1. Why This Even Matters — A Story First A security guard reviewing an entire building's security camera footage frame-by-frame every single second to spot an intruder is an enormous, wasteful amount of constant attention compared to a motion-sensor alarm that only sounds the instant something genuinely changes in the room. `MutationObserver` is that motion sensor for the DOM — it watches for real, genuine tree changes and reports them, rather than requiring constant manual re-scanning. ## 2. The Core Idea 📌 **Interview term:

Tricky JavaScript Scenario #69: MutationObserver tree monitoring

The problem

Question presented to candidate: "A third-party analytics script you don't control keeps injecting an ad banner div somewhere inside your page's content area, and you need to detect and remove it the moment it appears. How would you reliably catch that injection?"

What a strong answer should cover:

📌 Interview term: MutationObserver — a real, built-in browser API that lets code .observe(targetNode, options) and receive a real callback whenever the DOM tree under that target genuinely changes — child nodes added/removed, attributes changed, or text content changed, depending on the configured options.
📌 Interview term: the real, direct answer to the prompt — verified directly via jsdom (which, unlike ResizeObserver/IntersectionObserver, genuinely DOES implement MutationObserver): observing a target with { childList: true, subtree: true } genuinely detected a real, dynamically-injected <script> node appended anywhere under the target, reporting it in a real mutations array with type: "childList" and the injected node present in addedNodes.
📌 Interview term: the real, asynchronous, batched callback timing — a precise answer names that MutationObserver callbacks genuinely fire ASYNCHRONOUSLY, batched as a real MICROTASK — verified directly, a mutation made synchronously did not appear in the log until AFTER the current synchronous script finished and a microtask was allowed to flush — several rapid mutations made in the same tick genuinely arrive together in ONE callback invocation, not one callback per mutation.
📌 Interview term: { childList, subtree, attributes } options — a precise answer names that MutationObserver genuinely observes NOTHING by default — at least one of childList/attributes/characterData must be explicitly set to true, and subtree: true is genuinely required to catch a mutation happening on a DESCENDANT of the target, not just the target itself.
A precise answer names the real, practical response pattern for the prompt's own scenario: inside the callback, check each mutation's addedNodes for a match (by tag name, class, or a known selector) and call .remove() on it immediately — plus the real caveat that .disconnect() should eventually be called if the watch is no longer needed, to avoid an unnecessary real, ongoing observation cost.

Clarifying questions expected:

None — this is a definitional/practical question; directly demonstrating the real, verified detection of an injected node is the strong signal.

Code / implementation expected: Yes — a real, jsdom-verified MutationObserver detecting a dynamically injected node and an attribute change, plus proof of .disconnect() stopping further detection.

observers
tricky
real-world

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript fundamentals interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every claim below was actually run against a real jsdom document — jsdom, unlike ResizeObserver/IntersectionObserver (covered in this bank's own dedicated questions), genuinely does implement MutationObserver, confirmed directly.

1. Why This Even Matters — A Story First

A security guard reviewing an entire building's security camera footage frame-by-frame every single second to spot an intruder is an enormous, wasteful amount of constant attention compared to a motion-sensor alarm that only sounds the instant something genuinely changes in the room. MutationObserver is that motion sensor for the DOM — it watches for real, genuine tree changes and reports them, rather

The solution is hidden so you can try first

6 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof via jsdom: MutationObserver detects a dynamically injected node and an attribute change, fires asynchronously as a batched microtask, and disconnect() stops further detection