JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<h1>
foo
</h1>

JavaScript

trace = console.log;
// 
function whenElementExists(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 });
  });
}
const $className = '.some-className';
whenElementExists($className)
  .then((el) => {
    // your element is ready
	 trace('ready:', el)
  })
  
  setTimeout( ()=> {
  	trace('####')
	$('<div class="some-className">Foo</div>').appendTo('body')
  }, 5000)