waitForElement.js

waitForElement.js

function waitForElement(selector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(selector);

    if(element) {
      resolve(element);
      return;
    }

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var nodes = Array.from(mutation.addedNodes);
        for(var node of nodes) {
          if(node.matches && node.matches(selector)) {
            observer.disconnect();
            resolve(node);
            return;
          }
        };
      });
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });
  });
}

Note: @jaffathecake also pointed out that if we add in an element that is nested in another element via appendChild then it won't get picked up...

waitForElement("#test").then(el => {
// this won't fire.
alert(el);
});

var parent = document.createElement('div');
var child = document.createElement('div');
child.id = "test";
parent.appendChild(child);
document.documentElement.appendChild(parent);