如何使用 Mutation observer 而不是 settimeout 附加一个 div

Question

如果 DOM 中存在具有特定 class 的元素，我有 js 代码附加 div。这是它的代码。这些步骤首先创建一个 div 和一个特定的 class。然后它检查 Dom 是否有一个带有 class id banner 的元素，如果有则它会使用 insertBefore 追加创建的 div。我使用它是因为横幅元素是动态添加到 dom 中的，并不总是出现在 Dom 中。这很好用。

var overlayelem = document.createElement('div');
overlayelem.setAttribute("class", "overlay");

setTimeout(function(){
  var elem = document.getElementById('banner');
  elem.parentNode.insertBefore(overlayelem, elem.nextSibling);
}, 10)

但问题是我不能完全依赖 setTimeout，我希望使用 mutation ovberser 来实现这个，所以尝试使用它和代码是这样的（删除了 setTimeout）

var overlayelem = document.createElement('div');
overlayelem.setAttribute("class", "overlay");


var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList")  {
      var elem = document.getElementById('banner');
      if(elem) {
        elem.parentNode.insertBefore(overlayelem, elem.nextSibling);
      }
    }
  })
})

var elemBody = document.getElementById("body")
observer.observe(elemBody, {
  childList: true,
  subtree: true,
})

但这不能正常工作。该网站不断加载，永不停止。任何人都可以帮助解决 Mutationobersever 中的问题。

Answer 1

刚刚输了observer.disconnect();?

observer.observe(elemBody, {
  childList: true,
  subtree: true,
})
//like this
observer.disconnect();

如何使用 Mutation observer 而不是 settimeout 附加一个 div

How to use Mutation observer instead of settimeout to append a div

javascript

mutation-observers