如何使用Mutation observer而不是settimeout来追加div。

Question

我有一段js代码，如果DOM中存在一个具有特定类的元素，就会附加一个div。 以下是该代码。步骤是首先创建一个带有特定类的div。然后它检查DOM中是否有一个类id为banner的元素，如果有，那么它将使用insertBefore附加所创建的div。我使用这个方法是因为banner元素是动态添加到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，我希望使用突变obberser来实现这一点，所以尝试使用，代码是这样的（删除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();