Обнаружить добавленный элемент в DOM с Mutation Observer

Question

Я добавляю некоторый элемент в DOM после события перетаскивания. Мне нужно обнаружить этот элемент и момент добавления этого элемента. Я использую Mutation Observer, но что-то не так, код:

var targetNodes = $('.mvly'); 
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 
var myObserver = new MutationObserver (mutationHandler); 
var obsConfig = { childList: true, characterData: true, attributes: true, subtree: true }; 

targetNodes.each(function(){ 
    myObserver.observe(this, obsConfig); 
}); 

function mutationHandler (mutationRecords) { 
    mutationRecords.forEach (function (mutation) { 
     if (typeof mutation.addedNodes == "object") { 
      console.log('test'); 
     } 
    }); 
} 

Может кто-нибудь помочь, много thx.

Answer 1

Вот простой пример того, как вы можете использовать MutationObserver для прослушивания, когда элемент добавлен в DOM.

Для краткости я использую синтаксис jQuery для сборки узла и вставки его в DOM.

var myElement = $("<div>hello world</div>")[0]; 

var observer = new MutationObserver(function(mutations) { 
    if (document.contains(myElement)) { 
     console.log("It's in the DOM!"); 
     observer.disconnect(); 
    } 
}); 

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true}); 

$("body").append(myElement); // console.log: It's in the DOM! 

Вам не нужно перебирать каждое MutationRecord хранящегося в mutations, потому что вы можете выполнить document.contains проверки непосредственно на myElement.