Is there a JQuery event to determine when an element's list of children has changed?

I'm hoping to find a JQuery event that will tell me when an element collection has grown or shrunk af开发者_运维知识库ter the addition/removal of a child element.

What you are looking for are the DOMNodeInserted and DOMNodeRemoved events.

For example, after you bind to a DOMNodeInserted event of a list:

$('ol').bind('DOMNodeInserted', function() {
    alert('node inserted');
});

and then another list item is inserted:

$('ol').append('<li>x</li>');

the event is fired.

You can count child elements initially then use a conditional statement to check whether count changed.

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

alert($('div').children().length);