Как определить элемент, добавляемый/удаляемый из элемента dom?

Question

Скажем, у меня были div#parent и I append и remove элементы с помощью jquery. Как я смогу обнаружить, когда такое событие происходит в элементе div#parent?

Answer 1

Использование Mutation Observers как предложено @Qantas в его answer

Вы можете использовать DOMNodeInserted и DOMNodeRemoved

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

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

MDN Docs

Answer 2

Вы должны связать DOMSubtreeModified событие

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

http://jsfiddle.net/WQeM3/

Answer 3

Не используйте такие мутационные события, как DOMNodeInserted и DOMNodeRemoved.

Вместо этого используйте DOM Mutation Observers, которые поддерживаются во всех современных браузерах, кроме IE10 и ниже (Can I use). Наблюдатели за мутацией предназначены для замены событий мутации (которые устарели), поскольку они, как было установлено, имеют низкую производительность из-за flaws in its design.

var x = new MutationObserver(function (e) { 
    if (e[0].removedNodes) console.log(1); 
}); 

x.observe(document.getElementById('parent'), { childList: true });