javascript - DOMNodeInserted 的新等价物是什么？

Question

DOMNodeInserted event has been deprecated并且所有的突变事件都被突变观察者所取代。

但是，within mutation observers只有配置选项可以观察节点属性、内容和子节点的变化。它在 DOM 树中的位置没有任何变化。

我能想到一个“解决方案”，它是观察从 document.body 开始的所有内容，搜索一个突变，即添加我的目标节点，但这是一种非常糟糕的做任何事情的方法。

那么用 Mutation Observers 替换已弃用的 DOMNodeInserted 的预期方法是什么？

编辑:发现可能重复 What is the most efficient way of detecting when an element with a particular ID is inserted in the DOM

再一次，SO:The searchbar works better with Tags than Questions. Explaining this could reduce duplicates and save users time

下面是一些代码，您可以在其中看到所有可用的变异观察器配置选项都没有响应添加到页面的元素:

var addMe = document.createElement("div");
var config = {
  attributes: true,
  childList: true,
  characterData: true
}
var observer = new MutationObserver(function(mutations) {
  console.log(mutations);
});
observer.observe(addMe, config);

function appendAddMe() {
  document.body.appendChild(addMe);
}

div {
  height: 50px;
  width: 50px;
  background: #969;
}

<button onclick="appendAddMe()">Append addMe</button>

Answer 1

我真的不认为这是问题的答案，但无论如何我都想分享它，因为它聊胜于无。

这个问题有一些很好的答案:What is the most efficient way of detecting when an element with a particular ID is inserted in the DOM

特别是这个答案:https://stackoverflow.com/a/25107064/4808079来自 schettino72

iframe elements trigger load/unoad events. You can insert a dumb iframe in the element you want to watch... And trigger a 'load' event in the original element yourself.

function watch($ele){
    var $iframe = document.createElement('iframe');
    $iframe.style.display = 'none';
    $ele.appendChild($iframe);
    $iframe.addEventListener('load', function(){
      var event = new CustomEvent('load');
      $ele.dispatchEvent(event);
    });
}

我仍然想保留这个问题，因为这是一个 hack 而不是真正的答案。 DOMNodeInserted 可能没有被弃用，所以每个人都可以用这种方式代替。