The content on my page is loaded via AJAX (it's a step by step process) and I need to check if a specific div exists.

That specific div appears after few clicks. I have to mention that I don't know the number of clicks.

How can I continuously check if the div exists till it finds it and after it finds it do to something?

Later edit: How can I continuously check till a specific div doesn't exist and do something after that. More exactly the div is there, but after a few ajax calls it gets removed.

The content on my page is loaded via AJAX (it's a step by step process) and I need to check if a specific div exists.

That specific div appears after few clicks. I have to mention that I don't know the number of clicks.

How can I continuously check if the div exists till it finds it and after it finds it do to something?

Later edit: How can I continuously check till a specific div doesn't exist and do something after that. More exactly the div is there, but after a few ajax calls it gets removed.

• javascript
• jquery
• ajax
• if-statement

• Yeah, but the thing is that I never know exactly after which number of clicks it appears. – agis Commented May 22, 2016 at 12:06
• you can try setInterval – Mahedi Sabuj Commented May 22, 2016 at 12:11
• how exactly can I use this? – agis Commented May 22, 2016 at 12:14
• Do you control the ajax? Or is it a third party script? If so best solution is very simple – charlietfl Commented May 22, 2016 at 13:02
• I am controlling in it, if controlling means that I have to click on something in order to receive the content which contains that specific div. – agis Commented May 22, 2016 at 13:32

5 Answers 5

Use setInterval:

var divCheckingInterval = setInterval(function(){
    // Find it with a selector
    if(document.querySelector("#element")){
        console.log("Found!");
        clearInterval(divCheckingInterval);
        // Do something
    }
}, 500);

A better way to do something when the div appears using MutationObservers:

var observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        for(var i = 0;i < mutation.addedNodes.length;i++){
            if(mutation.addedNodes[i].id === "the-element"){
                console.log("Found!");
                observer.disconnect();
                // Do something
            }
        }
    });
});
observer.observe(document.querySelector("#parent-of-where-the-div-is-going-to-appear"), {childList: true, subtree: true});

The function in the MutationObserver constructor will only get triggered when a element is added or removed from the element you specified which is better for performance.

If you can't control the AJAX load, this might be a solution for you.

Note: As mented by @metarmask, DOMSubtreeModified is deprecated but has still a better cross browser coverage (at the time this answer were posted) than the newer MutationObserver (provided a sample of that in the end of this answer).

Use DOMSubtreeModified event, which will allow any method, click or what ever, to add (or remove) content and it will be detected.

(function(doc,found) {
  window.addEventListener('DOMSubtreeModified', function() {

    var yourdiv = doc.querySelector("#yourdiv");

    if(found && !yourdiv){
      // Was there but is gone, do something
      found = false;

    }

    if(yourdiv){
      // Found it, do something
      found = true;

    }

  }, false);
})(document,false);

It work like this, when content is inserted (or removed) the event fires and check for your specific div.

It also has benefits of not being called every nn second, like a timer, nor being processed on every click, only when DOM changed.

An equivalent sample using the newer MutationObserver method would be

(function(doc,found) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {

          var yourdiv = doc.querySelector("#yourdiv");

          if(found && !yourdiv){
            // Was there but is gone, do something
            found = false;

          }

          if(yourdiv){
            // Found it, do something
            found = true;

          }

        });
    });
    observer.observe(doc, { childList: true, subtree: true });
})(document,false);

Use setInterval to periodically check for your div (500 ms below). When its found, take the action and remember to clear the interval.

t = setInterval(function(){
    var mydiv = $('div.myclass');
    if (mydiv.length > 0) {
        console.log('Div exists');
        clearInterval(t);
    }
}, 500);

var time = setInterval(check, 100);

check = function()
{
    if ($("div").length > 0 )
    {
        //do something
        clearInterval (time); // clear countdown
    }
}

If it happens after a certain number of clicks you can monitor after every click on the page.

function checkIfDivExists () {
  if (document.querySelector('#your-div')) {
    // Stop monitoring
    document.removeEventListener('click', checkIfDivExists);
    // Do what you need to do
  }
}

document.addEventListener('click', checkIfDivExists)

In this way you check only when it's necessary rather than trying several times each second, which will slow down the page.