Stephen Stephen - 1 month ago 11
Javascript Question

Determining if a HTML element has been added to the DOM dynamically

Is there a way in Javascript or jQuery to find out when a HTML element has been added to the DOM dynamically, either through

jQuery.append()
or one of the native Javascript's node manipulators? There are probably several different ways to add HTML elements to the page dynamically, so I'm not sure what event or events I should be listening on.

The specific example is that that an anchor tag is being added to the page by a third-party Javascript code (that I cannot modify or easily gleam). I want to change the link's text.

I am hoping there is something better than a
setTimeout()
loop on
$(SOME ELEMENT).length > 0
.
(part of which I saw in How can I determine if a dynamically-created DOM element has been added to the DOM? but it's from 2008)

Answer

You can use Mutation Observers for this purpose - at least if you do not need to support IE/Opera.

Here's a short example (taken from html5rocks.com) on how they are used:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for(var i = 0; i < mutation.addedNodes.length; i++)
            insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document, {
    childList: true
});
console.log(insertedNodes);

Note the Webkit prefix. You need to use the browser-specific prefix. In Firefox it would be Moz instead.