title: DOM : How to detect a new child elements?
body: <p>I want to detect the insertion of a new <code>div</code> element <em>only as a direct child</em> of the parent <code>div</code>.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div id="child1"&gt;&lt;/div&gt;
      &lt;div id="child2"&gt;&lt;/div&gt;
      &lt;div id="newChild"&gt;I want this element to be detected&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>DOMNodeInserted()</code> event is not a solution for me because it is triggered on every element insertion, not just children.</p>
  
  <p>Like: </p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div id="child1"&gt;
          &lt;span&gt;I don't want this new element to be detected&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="child2"&gt;&lt;/div&gt;
      &lt;div id="child3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>