jQuery: ¿Cómo puedo detectar si el html ha cambiado dentro de un elemento dado?

Question

En javascript, posiblemente usando jQuery, ¿cómo puedo detectar si el contenido html de un elemento dado ha cambiado?

me gustaría ser capaz de hacer algo como:

$('#myDiv').change(function(){ 
    // do some stuff 
}); 

básicamente estoy tratando de detectar si determinados elementos se agregan a la div o si el código HTML interno de elementos dados (como etiquetas) ha cambiado y luego oculta o muestra el div dependiendo del contenido.

Cualquier idea alternativa acerca de cómo lograr smt como esta también se agradece.

¡Espero no tener que volver a un plugin oscuro para hacer esto!

NOTA: ¡esto debe funcionar al menos en IE8!

Answer 1

Puede usar el evento DOM Level 3 DOMNodeInserted. Ejemplo:

$('#myDiv').bind('DOMNodeInserted', function(e) { 
    console.log('element: ', e.target, ' was inserted); 
}); 

Demostración: http://www.jsfiddle.net/vsgdZ/1/

El evento se dispara cada vez que un nuevo nodo se añade al elemento en el que se enlaza el controlador.