Question

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

Example:

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="newChild">I want this element to be detected</div>
</div>

The DOMNodeInserted() event is not a solution for me because it is triggered on every element insertion, not just children.

Like:

<div id="parent">
    <div id="child1">
        <span>I don't want this new element to be detected</span>
    </div>
    <div id="child2"></div>
    <div id="child3"></div>
</div>

Answer 1

Assume your event handler looks like this:

function(evt) {
    // whatever
}

Inside the handler, evt.relatedNode is the element into which the insertion is being performed. You can switch on it and decide to ignore or process the event.

See it in action.