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：如何檢測新的子元素？

回答

相關問題