Perform the Function When a Specific Item is Added to the Document | wait-for-it.js

wait-for-it.js is a JavaScript library that allows you to implement the function when adding a specific element to the document that runs a function when an item is added to the DOM. Based on the MutationObserver API.

Js uses the HTML MutationObserver to wait for the parameters recorded in it. Whenever an item is added to the document if the registered setting is checked and if it finds an item using this specifier, it executes the callback function and removes this callback from its queue to prevent re-excitation.

wait for element to be available javascript, mutationobserver, javascript wait for element to render, jquery wait for element to be visible, wait for element to exist

Have you encountered a situation where you had to wait for some HTML element in a webpage before it could perform a job?

Wait no longer, because wait-for-it.js is at your service.

What do you offer?

It provides you a much simpler way to implement the (callback) function when the selected (selected) element is added to the page.

How does it work?

It uses nothing other than your JavaScript to get the job done, like the MutationObserver API.

Where can I use it?

Suppose you are using an external library that makes changes to the content of your page and you want to implement functionality when making these changes but the library itself does not issue any kind of event.

One way to deal with this issue is to create your own copy of the library and edit that library to suit your needs but there can be various limitations with this approach. For example,

  • You may have to manually update your version every time the library is updated.
  • This library restricts you in some way to use it when it’s not being used by their server.

In scenarios like mentioned above, you can only control the code. So what you can do is include wait-for-it.js in your code that can wait for changes to the content and if the CSS selector you specified appears it will simply trigger the callback function you specified. That way, even if this particular library is updated, you won’t have to make any changes to your code.

How to make use of it:

1. Download and embody the wait-for-it.js library on the web page.

<script src="wait-for-it.js"></script>

2. Invoke a callback function when a component is added to the doc.

<button class="btn" id="example">Example Button</button>
waitForElement('#example', function () {
  console.log('The Example Button Has Been Added To The Document!');

3. Return an error if the goal element has not been added to the web page inside a specified time.

waitForElement('#example', function (timeout) {
  if(timeout === true) {
    console.log('As Expected, Element with #example did not appear in 2000 milliseconds.');
  console.log('The Example Button Has Been Added To The Document!');
}, 2000);

Wait For An Element To Be Added To The Document, wait-for-it.js Plugin/Github, javascript wait until variable exists, javascript wait until function exists, mutationobserver wait for element to exist

See Demo And Download

Official Website(cstayyab): Click Here

This superior jQuery/javascript plugin is developed by cstayyab. For extra Advanced Usages, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…