Handler for dynamically created DOM nodes as they are inserted

Question

I enjoy running custom scripts on pages that I do not own or control. Many times these pages have dynamically created content that I would like to apply a function to.

Is this possible? If so, how can I do this? Ideally I am looking for something live jQuery's live method, except instead of binding an event like click it would be more like an event that happens when the element is loaded in the DOM. load event would work for some elements but I don't think for all...

For this question, assume that you cannot look at or change the code that is inserting the DOM nodes. I would like a technique that I could use in a userscript or bookmarklet that could be used across multiple unrelated sites.

Edit: I am looking for something to use on my invert colors bookmarklet: JavaScript: Invert color on all elements of a page

Answer 1

Assuming you're running a browser like Firefox or Chrome, you could listen for the DOMNodeInserted event:

$(document).on('DOMNodeInserted', function(e) {
    $(e.target).css({ color : '#c00' });
});

$('body').append('<div>test</div>');​

Fiddle: http://jsfiddle.net/VeF6g/ (probably fails in IE)

Update: The event is deprecated. You should use a MutationObserver:

var observer = new MutationObserver(function(mutationList) {
    for (var mutation of mutationList) {
        for (var child of mutation.addedNodes) {
            child.style.color = '#c00';
        }
    }
});
observer.observe(document, {childList: true, subtree: true});

// ready? Then stop listening with
observer.disconnect();

More information here: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

If you don't have access to a library like jQuery, here is the syntax in only-JavaScript :

document.addEventListener('DOMNodeInserted', nodeInsert)

function nodeInsert () {
  event.srcElement.style.color = '#ffffff'
}

I think it should work in most browsers.

Answer 3

Here is one nice way to handle the node insertion event. set animations for the element that you are going to add using css.

<style type="text/css">

/* set up the keyframes; remember to create prefixed keyframes too! */

@keyframes nodeInserted {  
from { opacity: 0.99; }
to { opacity: 1; }  
}

#parent > button {
animation-duration: 0.001s;
animation-name: nodeInserted;
}

</style>

#parent is the id for the div, in which i am going to append button's dynamically.

<script type="text/javascript">

    var insertListener = function(event){
        if (event.animationName == "nodeInserted") {
            // This is the debug for knowing our listener worked!
            // event.target is the new node!
            console.warn("Another node has been inserted! ", event, event.target);
        }
    }

    document.addEventListener("animationstart", insertListener, false); // standard + firefox
    document.addEventListener("MSAnimationStart", insertListener, false); // IE
    document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

    setInterval(function(){

        var btn = document.createElement("BUTTON");

        var t = document.createTextNode("CLICK ME");       // Create a text node

        btn.appendChild(t);         

        document.getElementById("parent").appendChild(btn);

    }, 2000);

</script>

Answer 4

This is rather difficult to accomplish, because there is no viable event for reacting to DOM changes. I would rather stick to event delegation instead.

But there are some events that you may find useful or interesting. On Mozilla Developer Network's list of DOM events you can see eg.:

• DOMNodeInserted,
• DOMNodeInsertedIntoDocument,
• DOMNodeRemoved,
• DOMElementNameChanged,

All of them however are marked as W3C drafts.

Answer 5

A generic way to detect node insertion is to use the DOMNodeInserted mutation event.

I am interested in every node actually. I am changing the colors of everything on the page.

For this purpose, a better solution is to inject a dynamic stylesheet, sufficed with the !important flag. If you only want to change colors, I recommend the Stylish extension (Stylish for Chrome) instead of GreaseMonkey.