How to catch creation of DOM elements and manipulate them with jQuery

Question

I\'m trying to devise a method of when adding a simple div element with a class and some data-* in it, it will replace it or add into it some other elements. This method sho

Answer 1

You could use a DOM Level 3 Event, like DOMNodeInserted. This could look like:

$(document).bind('DOMNodeInserted', function(event) {
    // A new node was inserted into the DOM
    // event.target is a reference to the newly inserted node
});

As an alternative, you might checkout the .liveQueryhelp jQuery plugin.

update

In referrence to your comment, have a look at http://www.quirksmode.org/dom/events/index.html, only browser which do not support it are the Internet Explorers of this this world (I guess IE9 does at least).

I can't say much about the performance, but it should perform fairly well.