Detect added element to DOM with Mutation Observer

html, javascript, jquery, mutation-events

Solution

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

Problem

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.

Original source