只要它存在就用另一個元素替換一個元素

-1

我正在嘗試編寫一個腳本，在任何時候它都會替換一個元素。這意味着我需要在創建它時立即替換該元素，包括頁面加載時。只要它存在就用另一個元素替換一個元素

我試過使用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);

我明明只是檢查元素每一秒和取代它，但我懷疑這是可怕的高性能，它肯定是不優雅。

如何在任何時候檢測元素的創建或存在以便我可以用另一個元素替換它？

來源

2016-05-10 Mystagogue

也許再次嘗試使用MutationObserver。這裏有一些例子（http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom）可能有幫助。 – Moob

MutationObserver正是你需要在這裏使用的（假設你的目標瀏覽器支持它）。請將您嘗試的代碼添加到問題中，以便我們可以對其進行調試。 –

您可以偵聽DOM改變

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

來源

2016-05-10 16:01:34

我希望能找到一種方法來檢測被添加的元素，而是我發現在檢測任何改變父母的做法成功，然後搜索該元素並將其替換。下面是腳本的最終近似值：

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

});

來源

2016-05-10 19:14:15 Mystagogue

只要它存在就用另一個元素替換一個元素

回答

相關問題