Await for DOM node

Wait for a DOM node to appear on page, then do something

by Eugene Trounev

HTML

<p>
A new div will be appended to the DOM in 5 seconds.
</p>

JavaScript

/**
 * Setup a monitor for a specific selector to appear on the DOM tree
 *
 * @param {string} selectors monitor DOM for node that match selectors
 * @param {Function(Array<HTMLElement>)} cb callback invoked when the required DOM nodes are found on the DOM tree. Calback function receives an array of the nodes found.
 */
function $awaitDOMNode(selectors, cb) {
  const config = {
    childList: true
  };
  const onDOMUpdate = function() {
    const result = document.querySelectorAll(selectors);
    if (result.length > 0) {
      observer.disconnect();
      cb(result);
    }
  };
  const observer = new MutationObserver(onDOMUpdate);
  observer.observe(document.body, config);
}

/* Example: */

setTimeout(function() {
  const div = document.createElement("div");
  div.id = "test-node";
  document.body.appendChild(div);
}, 5000);

$awaitDOMNode("#test-node", function(result) {
  result.forEach(
    function(node) {
      node.innerHTML = "I have been found!";
    }
  );
});