Wait for an element to exist

waitForAddedNode.ts

function waitForAddedNode(params: {
	query: string;
	parent: HTMLElement;
	recursive: boolean;
	done: (el: HTMLElement) => void;
}): void {
	if (!window.MutationObserver) {
		return;
	}

	const docMutationObserver = new MutationObserver(() => {
		const el = params.parent.querySelector(params.query);
		if (el) {
			params.done(el);

			if (docMutationObserver && docMutationObserver.disconnect) {
				// tidy up the mutation observer
				docMutationObserver.disconnect();
			}
		}
	});

	docMutationObserver.observe(params.parent || document, {
		subtree: !!params.recursive,
		childList: true,
	});
}

waitForAddedNode({
	query: '#myDynamicElement',
	parent: document.body,
	recursive: false,
	done: function (el) {
		console.log('element is now in the DOM', {el})
	}
});