Detect element availability on the initial page load and those dynamically appended to the DOM

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/ready

Provide a selector string for the element(s) you want to target as the first argument and a callback function as the second argument. It returns a function that stops observing for new elements only for that particular selector/callback combination:

const off = ready('.foo', (element) => {
    off(); // Stop observing for ".foo" elements
});

When any element matching the selector becomes available, the callback is invoked in the context of the element as well as passing it as the only parameter. If multiple elements are found, the callback is invoked in succession for each element in document order.

Alternatively, provide just the callback function as the only argument to add a generic DOM ready event listener:

ready((doc) => {
    // The DOM is ready
});

This project is dedicated to the public domain as described by the Unlicense.