Question

I have some javascript libraries (for example Adobe Edge), which dynamically insert script nodes into DOM. I detect changes with MutationsObserver, is it possible to modify the mutated nodes?

Was it helpful?

Solution

Yes you can modify nodes that are added to the DOM dynamically just like you can any other node.

var target = document.querySelector('div');

new MutationObserver(function(mutations) {
    mutations.forEach(function (mutation) {
        Array.prototype.forEach.call(mutation.addedNodes, function (node) {
            node.style.backgroundColor = 'red';
        });
    });
}).observe(document.querySelector('div'), {attributes: true, childList: true, characterData: true});

target.appendChild(document.createElement('span'));

http://jsfiddle.net/ExplosionPIlls/rK6Hr/

OTHER TIPS

Calling takeRecords() on your MutationObserver should give you an array of MutationRecords, they have property target which is the node that has been changed.
Basically check the API.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top