Question

Say I have a third party Twitter widget on a page which keeps updating whenever there is a new tweet. Is there some way to figure out when a new div has been added to this widget? Is there an event or something I can hook onto (on maybe the widgets parent div)?

If there isn’t, how do I do this? Maybe hook onto the ajax calls the widget is making? How do I do that? It seems possible as firebug seems to be doing this but I can’t tell how.

Answer 1

If you’re using any kind of modern browser, you can use the DOM Mutation Events to listen for node changes. From the description of your question you’re probably looking for DOMNodeInserted. If you must you can use a horrible setTimeout() hack, but in general it’s better to wait for events than spin around waiting for something to happen.

Heck here is some example code because I am bored:

var widget = document.getElementById('mywidget');
widget.addEventListener('DOMNodeInserted', function (e) {
  if (e.target.nodeName !== 'DIV') return;
  // do some other code here
}, false);