заменить один элемент другим, когда он существует

Question

Я пытаюсь написать сценарий, который заменит один элемент другим в любой момент его существования. Это означает, что мне нужно заменить этот элемент, как только он будет создан, в том числе при загрузке страницы.

Я пробовал использовать MutationObserver безрезультатно.

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

Я мог бы, очевидно, просто проверить для элемента каждый второй и заменить его, но я сомневаюсь, что это ужасно производительным, и это, конечно, не элегантно.

Как я могу определить создание или существование элемента в любое время, чтобы заменить его другим элементом?

Answer 1

Вы можете слушать йот изменение

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

Answer 2

Я надеялся найти способ обнаружения элемента, добавляемый, но вместо этого я нашел успех в подходе, который обнаруживает какие-либо изменения в родительском, а затем ищет элемент и заменяет его. Приводит к окончательному приближению сценария:

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

});