Questions tagged [mutation-observers]

Mutation Observers are part of the DOM4 specification, and allow callbacks to be triggered when elements of the DOM change.

Filter by
Sorted by
Tagged with
319votes
10answers
374kviews

Detect changes in the DOM

I want to execute a function when some div or input are added to the html. Is this possible? For example, a text input is added, then the function should be called.
user avatar
  • 15.8k
153votes
8answers
167kviews

How can I be notified when an element is added to the page?

I want a function of my choosing to run when a DOM element is added to the page. This is in the context of a browser extension, so the webpage runs independently of me and I cannot modify its source. ...
user avatar
  • 54.5k
97votes
1answer
38kviews

Performance of MutationObserver to detect nodes in entire DOM

I'm interested in using MutationObserver to detect if a certain HTML element is added anywhere in an HTML page. For example's sake, I'll say that I want to detect if any <li>'s are added ...
user avatar
  • 83.3k
51votes
6answers
58kviews

Most efficient method of detecting/monitoring DOM changes?

I need an efficient mechanism for detecting changes to the DOM. Preferably cross-browser, but if there's any efficient means which are not cross browser, I can implement these with a fail-safe cross ...
user avatar
  • 5,020
49votes
4answers
53kviews

Can jQuery selectors be used with DOM mutation observers?

HTML5 includes a concept of "mutation observers" to monitor changes to the browser's DOM. Your observer callback will be passed data which looks a lot like DOM tree snippets. I don't know if they are ...
user avatar
  • 14.6k
42votes
4answers
72kviews

'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

I am creating a Chrome extension and trying to include a small text beside the SEND button of the gMail compose box. I am using a MutationObserver to know when the compose box window appears. I am ...
user avatar
40votes
1answer
23kviews

Can a single MutationObserver object observe multiple targets?

I would like to use a MutationObserver object to observe changes to some of my DOM nodes. The docs give an example of creating a MutationObserver object and registering it on a target. // select ...
user avatar
  • 5,287
39votes
3answers
32kviews

Mutation Observer for creating new elements

I am trying to make a function go off when a particular div is created. In the simplest of terms, I have something like this: <a href="" id="foo">Click me!</a> <script> $("#foo")....
user avatar
  • 489
32votes
1answer
21kviews

Detecting class change without setInterval

I have a div that has additional classes added to it programmatically. How can I detect the class name change without using this setInterval implementation? setInterval(function() { var elem = ...
user avatar
  • 12.5k
30votes
1answer
12kviews

Observe mutations on a target node that doesn't exist yet

Is it possible to observer mutations on a DOM node that doesn't exist yet? Example: My app creates a div at some point: <div id="message" data-message-content="foo" data-message-type="bar" />. ...
user avatar
  • 54k
28votes
1answer
9kviews

An event or observer for changes to getBoundingClientRect()

Is there a way to detect when an element's getBoundingClientRect() rectangle has changed without actually calculating getBoundingClientRect()? Something like a "dirty flag"? Naively, I assume that ...
user avatar
25votes
4answers
24kviews

Detect input value change with MutationObserver

I want to detect when text/value change in input field. Even if I change the value with js, I want to detect that changes. Here's what I've tried so far in demo in fiddle. HTML: <input type="...
user avatar
24votes
1answer
23kviews

MutationObserver not working

Consider the following code: var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var observer = new MutationObserver(function(...
user avatar
  • 3,568
21votes
1answer
15kviews

Mutation Observer Not Detecting Text Change

I'm scratching my head as to why MutationObserver doesn't detect text changes done using textContent. HTML <div id="mainContainer"> <h1>Heading</h1> <p>Paragraph.</p&...
user avatar
  • 2,776
21votes
2answers
14kviews

MutationObserver class changes

I am using MutationObserver to detect when a specific class has been added to an element. const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { ...
user avatar
  • 2,469

15 30 50 per page
1
2 3 4 5
37