Detect added element to DOM with Mutation Observer

Question

I'm adding some element to DOM after drag event. I need to detect this element and the moment when this element was added. I use Mutation Observer but something is wrong, the code:

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');
        }
    });
}

Can anybody help, much thx.

Are you actually mutating the DOM after you set the handler? What you have done handles mutations concerning the .mvly elements. If you want to catch the .mvly elements being added, you need to observe their parents (before they are added). — Tibos, Dec 06 '13 at 09:58
so i need to set `myObserver.observe(this.parentNode, obsConfig);`? — Lukas, Dec 06 '13 at 10:05

Elliot B. · Answer 1 · 2017-07-24T00:08:01.667

Here's a simple example of how you can use a MutationObserver to listen for when an element is added to the DOM.

For brevity, I'm using jQuery syntax to build the node and insert it into the 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!

You don't need to iterate over each MutationRecord stored in mutations because you can perform the document.contains check directly upon myElement.

Detect added element to DOM with Mutation Observer

1 Answers1

Linked