¿Cómo detectar el elemento que se agrega / elimina desde el elemento dom?

Supongamos que tengo un div#parent y append y remove elementos utilizando jquery. ¿Cómo podría detectar cuándo ocurre un evento de este tipo en el div#parent elemento div#parent ?

Utilice Mutation Observers como lo sugiere @Qantas en su respuesta


Los siguientes métodos están en desuso

Puede usar DOMNodeInserted y DOMNodeRemoved

 $("#parent").on('DOMNodeInserted', function(e) { console.log(e.target, ' was inserted'); }); $("#parent").on('DOMNodeRemoved', function(e) { console.log(e.target, ' was removed'); }); 

Documentos de MDN

No use eventos de mutación como DOMNodeInserted y DOMNodeRemoved.

En su lugar, use Observadores de Mutación DOM, que son compatibles con todos los navegadores modernos, excepto IE10 y versiones anteriores ( ¿Puedo usarlo? ). Los observadores de mutaciones están destinados a reemplazar los eventos de mutación (que han sido desaprobados), ya que se ha encontrado que tienen un bajo rendimiento debido a fallas en su diseño .

 var x = new MutationObserver(function (e) { if (e[0].removedNodes) console.log(1); }); x.observe(document.getElementById('parent'), { childList: true }); 

Debes enlazar el evento DOMSubtreeModified

 $("#parent").bind("DOMSubtreeModified",function(){ console.log('changed'); }); 

http://jsfiddle.net/WQeM3/