jQuery：如何检测html是否在给定元素中发生了变化？

Question

在javascript中，可能使用jQuery，如何检测给定元素的html内容是否发生了变化？

我希望能够做到这样的事情：

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

我基本上试图检测给定元素是否被添加到div中，或者给定元素（例如标签）的内部html是否已更改，然后根据内容隐藏或显示div。

关于如何实现这样的smt的任何其他想法也值得赞赏。

我希望我不必回复一些不起眼的插件来做到这一点！

注意：这至少需要在IE8中运行！

Answer 1

您可以使用DOM Level 3事件 DOMNodeInserted 。例如：

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

演示：http://www.jsfiddle.net/vsgdZ/1/

只要将新节点附加到绑定处理程序的元素，就会触发该事件。