DOM : How to detect a new child elements?

Question

I want to detect the insertion of a new div element only as a direct child of the parent div.

Example:

Answer 1

Use DOMNodeInserted on the parent and check the event.target.parentNode of the added element. If its id is parent, then the element is a direct descendant.

Demo: http://jsfiddle.net/ThinkingStiff/f2w7V/

document.getElementById( 'parent' ).addEventListener( 'DOMNodeInserted', function ( event ) {

    if( event.target.parentNode.id == 'parent' ) {
        //direct descendant        
    };

}, false );