Is there a javascript event when items are added to or removed from the DOM?

Question

I'm trying to build a Chrome browser extension, that should enhance the way the twitter website behaves in Google Chrome. I want to mark the top tweet that gets moved down when new tweets are loaded, and scroll to it.

I'm able to fetch the top tweet before the click by hooking the mousedown event using .live(). After that, I have to wait until the tweets are loaded, before I scroll down to the previous tweet. I have a hack in place with a setTimeout() now, and that works for me, but I'd like a better solution.

Possible solutions:

• Somehow hook an event that fires when elements are loaded to a div
• Hook an event that fires when an element gets removed from the DOM

Answer 1

Since you are targeting Google Chrome, you could use the DOM Level 2 Mutation Events, specifically:

• DOMNodeInserted
• DOMNodeRemoved

You can bind them by using addEventListener:

someElement.addEventListener('DOMNodeInserted', eventHandlerFunction, false);

Or since you're using jQuery's, with the bind method:

$(selector).bind('DOMNodeInserted', function () { 
  //..
});​

Be careful to not modify the affected DOM in those events, because you could get into an infinite event recursion, for example, if you insert an element in the DOMNodeInserted event, it will fire again.