Javascript DOM：如何检测新的子元素？

我只想将插入的新

div

元素检测为父

div

的直接子元素

例如：

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

---

为什么不使用DOMNodeInserted，但在事件处理程序中添加一个check/if语句，以便真正的逻辑只在需要时运行？

假设事件处理程序如下所示：

function(evt) {
    // whatever
}

在处理程序中，

evt.relatedNode

是执行插入的元素。您可以打开它并决定忽略或处理该事件

---

在父元素上使用

DOMNodeInserted

，并检查添加元素的

事件.target.parentNode

。如果其

id

是

parent

，则该元素是直接后代

演示：

---

你不能认为，如果一个更好的解决方案，比如在注入DOMi之前发出一个事件，没有页面的真正js代码，那么我不知道是否使用了witch事件。仅将我的代码注入其中以检测某些内容免责声明：DOMNodeInserted已被弃用。取而代之的是变异观察者-对于所有迟到并想知道闪亮的新事物是什么的人：@NidhalRouissi演示链接没有抛出一个

alert（）

？IE（8及以下）不支持DOMNodeInserted不推荐使用：@NidhalRouissi-正如你所知，这在IE8中似乎不适用于我。没关系，这是针对Google Chrome扩展的。IE不支持DomNodeInserted（8及以下？），不推荐使用：

function(evt) {
    // whatever
}

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

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

}, false );