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

replace one element with another whenever it exists

本文关键字：元素 替换 一个 另一个 存在      更新时间：2023-09-26

我正在尝试编写一个脚本，该脚本将在元素存在时用另一个元素替换一个元素。这意味着我需要在创建该元素后立即替换它，包括在加载页面时。

我尝试过使用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更改

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

我本想找到一种方法来检测添加的元素，但我发现了一种成功的方法，即检测父元素的任何更改，然后搜索元素并替换它

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);              
        })
});
相关文章：