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

javascript, jquery

Solution

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.

2022 Update: You don't need to use `WebKit` nor `Moz` as a preifx, as the majority of the browsers have implemented it. It is now accessible with `MutationObserver`.

Problem

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 glean). 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)

Original source

Related problems