您可以使用DOMNodeInserted
和DOMNodeRemoved
检查是否添加或删除了元素。不幸的是,IE不支持此功能。
$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
alert('Content added! Current content:' + '\n\n' + this.innerHTML);
} else {
alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
}
});
您可以使用保存初始内容和将来的更改.data()
。这是一个例子。
var div_eTypes = [],
div_changes = [];
$(function() {
$('#myDiv').each(function() {
this['data-initialContents'] = this.innerHTML;
}).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
div_eTypes.concat(e.type.match(/insert|remove/));
div_changes.concat(this.innerHTML);
});
});
输出示例:
> $('#myDiv').data('initialContents');
"<h1>Hello, world!</h1><p>This is an example.</p>"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"]
您可能还想包括DOMSubtreeModified
它,因为我发现了这一点,DOMNodeInserted
并且DOMNodeRemoved
如果innerHTML
直接替换一个元素也不会触发。它仍然不能在IE中运行,但至少在其他浏览器中可以正常运行。