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

我想仅检测作为父div的直接子的新div元素的插入。DOM：如何检测新的子元素？

例子：

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

，因为它引发了对每一个元素的插入，不只是孩子的事件不是针对我一个解决方案。

像：

<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>

来源

2012-01-15 Nidhal Rouissi

你不能想，如果像发射事件你注入到DOM – Raynos 2012-01-15 01:33:42

前一个更好的解决方案我没有在网页上的实际js代码，所以我不知道女巫事件被使用。只注入我的代码来检测 – 2012-01-15 01:40:53

**免责声明：**不推荐使用DOMNodeInserted。 – Raynos 2012-01-15 01:51:02

假设你的事件处理程序是这样的：

function(evt) { 
    // whatever 
}

的处理函数中，evt.relatedNode是为正在执行插入的元素。您可以打开它并决定忽略或处理事件。

See it in action。

来源

2012-01-15 01:41:07 Jon

Jon，你救了我，谢谢:) – 2012-01-15 02:11:58

@NidhalRouissi - 就这么你知道，这似乎并不适用于我在IE8中。 – jfriend00 2012-01-15 02:26:12

它确定，这是一个谷歌浏览器扩展 – 2012-01-15 02:31:51

你为什么不使用DOMNodeInserted，但在事件处理程序添加一个检查/ if语句，所以当你想让它真正的逻辑只运行到？

来源

2012-01-15 01:34:20 hugomg

您能否解释一下？ – 2012-01-15 01:38:29

IE不支持DOMNodeInserted（8及以下？）并且已弃用：http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted – 2012-11-28 14:40:16

在父级上使用DOMNodeInserted，并检查添加元素的event.target.parentNode。如果它的id是parent，则该元素是直接后代。

演示：http://jsfiddle.net/ThinkingStiff/f2w7V/

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

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

}, false);

来源

2012-01-15 01:43:05 ThinkingStiff

它没有为我工作，但我会继续尝试 – 2012-01-15 02:09:40

@NidhalRouissi演示链接没有抛出一个'alert（）'？ – ThinkingStiff 2012-01-15 02:10:59

我用http://jsfiddle.net/KEjke/1 – 2012-01-15 02:32:03

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

回答

相关问题