Recipes: how to listen to DOM insertions

The technique described here (more details in there):

http://davidwalsh.name/detect-node-insertion

It basically involves putting a CSS animation to the elements that will be attached in the future. When they get inserted, they run the animation, and when the animation finish running, it throws an “animationstarts” event.

The last part involves attaching a listener to the parent DOM, so when the CSS animation thrown the event, it is catch and processed there:

parentEl.addEventListener("animationstart", insertListener, false); // standard + firefox

You could also use the ‘DOMNodeInserted’ event, but it will be deprecated:

currentBox.bind(‘DOMNodeInserted’, function(e){
currentBox.find(‘object’).attr(‘width’, currentBox.width()).attr(‘height’, currentBox.height());
});