如何检测元素被添加/从DOM元素中删除？

Question

说我有一个div#parent和我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 });