由于性能问题，DOMNodeInserted和其他DOM突变事件已被弃用——推荐的方法是使用MutationObserver监视DOM。不过，它只在较新的浏览器中受支持，所以当MutationObserver不可用时，您应该回到DOMNodeInserted上。

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (!mutation.addedNodes) return

    for (let i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      let node = mutation.addedNodes[i]
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

// stop watching using:
observer.disconnect()

对于一个使用jQuery的简单方法，我发现这工作得很好:

  // Wait for element to exist.
  function elementLoaded(el, cb) {
    if ($(el).length) {
      // Element is now loaded.
      cb($(el));
    } else {
      // Repeat every 500ms.
      setTimeout(function() {
        elementLoaded(el, cb)
      }, 500);
    }
  };

  elementLoaded('.element-selector', function(el) {
    // Element is ready to use.
    el.click(function() {
      alert("You just clicked a dynamically inserted element");
    });
  });

在这里，我们只需每500毫秒检查一次元素是否加载，当加载成功时，我们就可以使用它。

这对于向已动态添加到文档中的元素添加单击处理程序特别有用。

简单的Javascript。

cont elementExist = setInterval(() => {
    var elm = document.getElementById("elementId")
    if (elm!=null)
         // call your function here to do something
        clearInterval(elementExist);
    }
}, 100);

注意:这将阻塞其他执行

一个使用MutationObserver的更清晰的例子:

new MutationObserver( mutation => {
    if (!mutation.addedNodes) return
    mutation.addedNodes.forEach( node => {
        // do stuff with node
    })
})

insertionQuery库呢?

insertionQuery使用CSS动画回调附加到指定的选择器，在创建元素时运行回调。此方法允许在创建元素时运行回调，而不仅仅是第一次。

从github:

用非dom事件的方式捕获节点。它使用选择器。 它不仅仅是为了更广泛的浏览器支持，在某些方面它可能比DOMMutationObserver更好。 为什么? 因为DOM事件会降低浏览器的速度，而insertionQuery不会 因为DOM Mutation Observer的浏览器支持比insertionQuery少 因为使用insertionQuery，您可以使用选择器过滤DOM更改，而没有性能开销! 广泛的支持! IE10+和其他设备(包括手机)

受杰米·胡伯的启发，我想出了一个答案。

这是一个基于承诺的函数，你可以设置:

最大尝试次数-默认为10; 延迟(毫秒)-默认为100毫秒。

因此，默认情况下，它将等待1秒，直到元素出现在DOM上。

如果它没有出现，它将返回一个承诺。用null拒绝，这样您就可以按照您的愿望处理错误。

Code

export function _waitForElement(selector, delay = 10, tries = 100) {
  const element = document.querySelector(selector);


  if (!window[`__${selector}`]) {
    window[`__${selector}`] = 0;
    window[`__${selector}__delay`] = delay;
    window[`__${selector}__tries`] = tries;
  }

  function _search() {
    return new Promise((resolve) => {
      window[`__${selector}`]++;
      setTimeout(resolve, window[`__${selector}__delay`]);
    });
  }

  if (element === null) {
    if (window[`__${selector}`] >= window[`__${selector}__tries`]) {
      window[`__${selector}`] = 0;
      return Promise.resolve(null);
    }

    return _search().then(() => _waitForElement(selector));
  } else {
    return Promise.resolve(element);
  }
}

用法:

async function wait(){
    try{
        const $el = await waitForElement(".llama");
        console.log($el);
    } catch(err){
        console.error("Timeout - couldn't find element.")
    }
} 

wait();

在上面的例子中，它将等待选择器.llama。您可以添加更大的延迟，并在StackoverFlow的控制台上进行测试。

只需将类llama添加到DOM上的任何元素。