ある要素が存在する場合は、ある要素を別の要素に置き換えてください。

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

私は明らかにただの要素のための毎秒をチェックして、それを置き換えるが、私はそれがひどくパフォーマンスだ疑い、それは確かにエレガントではありませんでした。

どのようにして要素の作成または存在を検出して、他の要素と置き換えることができますか？あなたは、DOMのために聞くことができます

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

});