replace one element with another whenever it exists

Question

I am trying to write a script that will replace one element with another any time it exists. This means I need to replace that element as soon as it is created, including when the page loads.

I have tried using MutationObserver to no avail.

var target = document.querySelector('#taskboard');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
        if($(mutation.target).is('div.someClass')){
            //Do a thing
        } 
  });     
});

config = { attributes: true, childList: true, characterData: true , subtree: true};

observer.observe(target, config);

I could obviously just check for the element every second and replace it, but I doubt that's terribly performant, and it is certainly not elegant.

How can I detect the creation or existence of an element at any time so that I may replace it with another element?

Maybe try again with the MutationObserver. There's some examples here (http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom) that might help. — Moob, May 10 '16 at 15:54
MutationObserver is exactly what you need to use here (assuming the browsers you're targeting support it). Please add the code you tried to the question so we can debug it. — Rory McCrossan, May 10 '16 at 15:55

score 0 · Answer 1 · answered May 10 '16 at 16:01

You can listen for dom changes

var cb = function(e){
  var elems = document.querySelectorAll('watchElem');
  console.log(elems);
  // do what you need to replace the elements
}
window.addEventListener("DOMContentLoaded", function () {
    var el = document.documentElement;
      el.addEventListener('DOMSubtreeModified', cb, false);
      el.addEventListener('DOMNodeInserted', cb, false);
      el.addEventListener('DOMNodeRemoved', cb, false);
  }, false);

score 0 · Answer 2 · answered May 10 '16 at 19:14

I was hoping to find a way to detect the element being added, but instead I found success in an approach that detects any change to the parent, then searches for the element and replaces it. Here is a final approximation of the script:

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                          callback();
                   });
            }
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true , attributes: true, characterData: true});
        }
})();

// Observe a specific DOM element:
observeDOM( document.getElementById('a real ID') ,function(mutations){ 

        $('a valid selector').each(function(index, element){
             bb = $.parseHTML('valid html');
             $(element).replaceWith(bb);              
        })

});

replace one element with another whenever it exists

2 Answers2