只要它存在就用另一个元素替换一个元素

-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

只要它存在就用另一个元素替换一个元素

回答

相关问题