How to wait until an element exists

Question

I m working on an Extension in Chrome  and I m wondering  what s the best way to find out when an element comes into existence  Using plain javascript  with an interval that checks until an element exists  or does jQuery have some easy way to do this

User · Answer

Here is a core JavaScript function to wait for the display of an element (well, its insertion into the DOM to be more accurate).

// Call the below function
waitForElementToDisplay("#div1",function(){alert("Hi");},1000,9000);

function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
  var startTimeInMs = Date.now();
  (function loopSearch() {
    if (document.querySelector(selector) != null) {
      callback();
      return;
    }
    else {
      setTimeout(function () {
        if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
          return;
        loopSearch();
      }, checkFrequencyInMs);
    }
  })();
}

This call will look for the HTML tag whose id="div1" every 1000 milliseconds. If the element is found, it will display an alert message Hi. If no element is found after 9000 milliseconds, this function stops its execution.

Parameters:

selector: String : This function looks for the element ${selector}.
callback: Function : This is a function that will be called if the element is found.
checkFrequencyInMs: Number : This function checks whether this element exists every ${checkFrequencyInMs} milliseconds.
timeoutInMs : Number : Optional. This function stops looking for the element after ${timeoutInMs} milliseconds.

NB : Selectors are explained at https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

User · Answer

You can listen to DOMNodeInserted or DOMSubtreeModified events which fire whenever a new element is added to the DOM    There is also LiveQuery jQuery plugin which would detect when a new element is created       future element   livequery function          element created

User · Answer

You can try this  const wait until element appear   setInterval      gt        if    element  length     0               some code         clearInterval wait until element appear            0    This solution works very good for me

User · Answer

I think that still there isnt any answer here with easy and readable working example  Use MutationObserver interface  to detect DOM changes  like this    x000D   x000D  var observer   new MutationObserver function mutations    x000D      if     p   length    x000D          console log  Exist  lets do something    x000D          observer disconnect     x000D            We can disconnect observer once the element exist if we dont want observe more changes in the DOM x000D        x000D      x000D   x000D     Start observing x000D  observer observe document body      document body is node target to observe x000D      childList  true    This is a must have for the observer with subtree x000D      subtree  true   Set to true if changes must also be observed in descendants  x000D      x000D               x000D    document  ready function     x000D         button   on  click   function     x000D             p   remove    x000D          setTimeout function     x000D                  newContent   append   lt p gt New element lt  p gt     x000D             2000   x000D          x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button gt New content lt  button gt  x000D   lt div id  newContent  gt  lt  div gt  x000D   x000D   x000D       Note  Spanish Mozilla docs about MutationObserver are more   detailed if you want more information

User · Answer

Here s a Promise-returning solution in vanilla Javascript  no messy callbacks    By default it checks every 200ms   function waitFor selector        return new Promise function  res  rej            waitForElementToDisplay selector  200           function waitForElementToDisplay selector  time                if  document querySelector selector     null                    res document querySelector selector                              else                   setTimeout function                          waitForElementToDisplay selector  time                      time

User · Answer

This is a simple solution for those who are used to promises and don t want to use any third party libs or timers   I have been using it in my projects for a while  function waitForElm selector        return new Promise resolve   gt            if  document querySelector selector                 return resolve document querySelector selector                       const observer   new MutationObserver mutations   gt                if  document querySelector selector                     resolve document querySelector selector                    observer disconnect                                       observer observe document body                childList  true              subtree  true                         To use it   waitForElm   some-class   then elm   gt  console log elm textContent      or with async await  const elm   await waitForElm   some-classs

User · Answer

Here s a function that acts as a thin wrapper around MutationObserver  The only requirement is that the browser support MutationObserver  there is no dependency on JQuery  Run the snippet below to see a working example    x000D   x000D  function waitForMutation parentNode  isMatchFunc  handlerFunc  observeSubtree  disconnectAfterMatch    x000D    var defaultIfUndefined   function val  defaultVal    x000D      return  typeof val      undefined     defaultVal   val  x000D       x000D   x000D    observeSubtree   defaultIfUndefined observeSubtree  false   x000D    disconnectAfterMatch   defaultIfUndefined disconnectAfterMatch  false   x000D   x000D    var observer   new MutationObserver function mutations    x000D      mutations forEach function mutation    x000D        if  mutation addedNodes    x000D          for  var i   0  i  lt  mutation addedNodes length  i      x000D            var node   mutation addedNodes i   x000D            if  isMatchFunc node     x000D              handlerFunc node   x000D              if  disconnectAfterMatch  observer disconnect    x000D               x000D            x000D          x000D          x000D        x000D   x000D    observer observe parentNode    x000D      childList  true  x000D      attributes  false  x000D      characterData  false  x000D      subtree  observeSubtree x000D        x000D    x000D   x000D     Example x000D  waitForMutation  x000D       parentNode  Root node to observe  If the mutation you re looking for x000D       might not occur directly below parentNode  pass  true  to the x000D       observeSubtree parameter  x000D    document getElementById  outerContent    x000D       isMatchFunc  Function to identify a match  If it returns true  x000D       handlerFunc will run  x000D       MutationObserver only fires once per mutation  not once for every node x000D       inside the mutation  If the element we re looking for is a child of x000D       the newly-added element  we need to use something like x000D       node querySelector   to find it  x000D    function node    x000D      return node querySelector   foo       null  x000D       x000D       handlerFunc  Handler  x000D    function node    x000D      var elem   document createElement  div    x000D      elem appendChild document createTextNode  Added node      node innerText          x000D      document getElementById  log   appendChild elem   x000D       x000D       observeSubtree x000D    true  x000D       disconnectAfterMatch  If this is true the hanlerFunc will only run on x000D       the first time that isMatchFunc returns true  If it s false  the handler x000D       will continue to fire on matches  x000D    false   x000D   x000D     Set up UI  Using JQuery here for convenience  x000D   x000D   outerContent       outerContent    x000D   innerContent       innerContent    x000D   x000D      addOuter   on  click   function     x000D    var newNode       lt div gt  lt span class  foo  gt Outer lt  span gt  lt  div gt     x000D     outerContent append newNode   x000D      x000D      addInner   on  click   function     x000D    var newNode       lt div gt  lt span class  foo  gt Inner lt  span gt  lt  div gt     x000D     innerContent append newNode   x000D      x000D   content   x000D    padding  1em  x000D    border  solid 1px black  x000D    overflow-y  auto  x000D    x000D   innerContent   x000D    height  100px  x000D    x000D   outerContent   x000D    height  200px  x000D    x000D   log   x000D    font-family  Courier  x000D    font-size  10pt  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt h2 gt Create some mutations lt  h2 gt  x000D   lt div id  main  gt  x000D     lt button id  addOuter  gt Add outer node lt  button gt  x000D     lt button id  addInner  gt Add inner node lt  button gt  x000D     lt div class  content  id  outerContent  gt  x000D       lt div class  content  id  innerContent  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt h2 gt Log lt  h2 gt  x000D   lt div id  log  gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you want it to stop looking after a while  timeout  then the following jQuery will work  It will time out after 10sec  I needed to use this code rather than pure JS because I needed to select an input via name and was having trouble implementing some of the other solutions           Wait for element to exist       function imageLoaded el  cb time             if    el  length                   Element is now loaded               cb   el                 var imageInput       input name product   image location                    console log imageInput              else if time  lt  10000                   Repeat every 500ms              setTimeout function                    time   time 500                   imageLoaded el  cb  time                 500                         var time   500       imageLoaded  input name product   image location       function el            do stuff here          time

User · Answer

You can do      yourelement   ready function            Please note that this will only work if the element is present in the DOM when being requested from the server  If the element is being dynamically added via JavaScript  it will not work and you may need to look at the other answers

User · Answer

How about the insertionQuery library  insertionQuery uses CSS Animation callbacks attached to the selector s  specified to run a callback when an element is created  This method allows callbacks to be run whenever an element is created  not just the first time  From github   Non-dom-event way to catch nodes showing up  And it uses selectors  It s not just for wider browser support  It can be better than DOMMutationObserver for certain things  Why   Because DOM Events slow down the browser and insertionQuery doesn t Because DOM Mutation Observer has less browser support than insertionQuery Because with insertionQuery you can filter DOM changes using selectors without performance overhead   Widespread support  IE10  and mostly anything else  including mobile

User · Answer

A solution returning a Promise and allowing to use a timeout  compatible IE 11     For a single element  type Element     use strict    function waitUntilElementLoaded selector        var timeout   arguments length  gt  1  amp  amp  arguments 1      undefined   arguments 1    0       var start   performance now        var now   0       return new Promise function  resolve  reject            var interval   setInterval function                  var element   document querySelector selector                if  element instanceof Element                    clearInterval interval                    resolve                               now   performance now                 if  now - start  gt   timeout                    reject  Could not find the element     selector     within     timeout     ms                             100               For multiple elements  type NodeList     use strict    function waitUntilElementsLoaded selector        var timeout   arguments length  gt  1  amp  amp  arguments 1      undefined   arguments 1    0       var start   performance now        var now   0       return new Promise function  resolve  reject            var interval   setInterval function                  var elements   document querySelectorAll selector                if  elements instanceof NodeList                    clearInterval interval                    resolve elements                              now   performance now                 if  now - start  gt   timeout                    reject  Could not find elements     selector     within     timeout     ms                             100               Examples   waitUntilElementLoaded   message   800  then function element           element found and available      element innerHTML             catch function            element not found within 800 milliseconds      waitUntilElementsLoaded   message   10000  then function elements        for const element of elements                             catch function error           elements not found withing 10 seconds       Works for both a list of elements and a single element

User · Answer

The observe function below will allow you to listen to elements via a selector  In the following example  after 2 seconds have passed  a  greeting will be inserted into the  container  Since we are listening to the insertion of this element  we can have a callback that triggers upon insertion   x000D   x000D  const observe    selector  callback  targetNode   document body    gt    new MutationObserver mutations   gt      mutations       flatMap  mutation    gt      mutation addedNodes        filter  node    gt  node matches  amp  amp  node matches selector        forEach callback      observe targetNode    childList  true  subtree  true      const createGreeting        gt      const el   document createElement  DIV      el textContent    Hello World     el classList add  greeting      return el      const container   document querySelector   container     observe   greeting   el   gt  console log  I have arrived    el   container    new Promise res   gt  setTimeout      gt  res createGreeting     2000      then el   gt  container appendChild el    x000D  html  body   width  100   height  100   margin  0  padding  0    body   display  flex     container   display  flex  flex  1  align-items  center  justify-content  center     greeting   font-weight  bold  font-size  2em    x000D   lt div class  container  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I used this approach to wait for an element to appear so I can execute the other functions after that   Let s say doTheRestOfTheStuff parameters  function should only be called after the element with ID the Element ID appears or finished loading  we can use   var existCondition   setInterval function      if      the Element ID   length        console log  Exists         clearInterval existCondition       doTheRestOfTheStuff parameters         100      check every 100ms

User · Answer

if you have async dom changes  this function checks  with time limit in seconds  for the DOM elements  it will not be heavy for the DOM and its Promise based     function getElement selector  i   5      return new Promise async  resolve  reject    gt        if i  lt   0  return reject    selector  not found        const elements   document querySelectorAll selector       if elements length  return resolve elements       return setTimeout async      gt  await getElement selector  i-1   1000              Now call it with your selector  try     element   await getElement   woohoo      catch e       catch the e      OR  getElement   woohoo   5   then element   gt       do somthing with the elements     catch e   gt       catch the error

User · Answer

A cleaner example using MutationObserver   new MutationObserver  mutation   gt        if   mutation addedNodes  return     mutation addedNodes forEach  node   gt               do stuff with node

User · Answer

DOMNodeInserted is being deprecated  along with the other DOM mutation events  because of performance issues - the recommended approach is to use a MutationObserver to watch the DOM  It s only supported in newer browsers though  so you should fall back onto DOMNodeInserted when MutationObserver isn t available  let observer   new MutationObserver  mutations    gt      mutations forEach  mutation    gt        if   mutation addedNodes  return      for  let i   0  i  lt  mutation addedNodes length  i               do things to your newly added nodes here       let node   mutation addedNodes i                 observer observe document body        childList  true     subtree  true     attributes  false     characterData  false        stop watching using  observer disconnect

User · Answer

Here s a pure Javascript function which allows you to wait for anything  Set the interval longer to take less CPU resource           brief Wait for something to be ready before triggering a timeout     param  callback  isready Function which returns true when the thing we re waiting for has happened     param  callback  success Function to call when the thing is ready     param  callback  error Function to call if we time out before the event becomes ready     param  int  count Number of times to retry the timeout  default 300 or 6s      param  int  interval Number of milliseconds to wait between attempts  default 20ms      function waitUntil isready  success  error  count  interval       if  count     undefined            count   300            if  interval     undefined            interval   20            if  isready              success            return               The call back isn t ready  We need to wait for it     setTimeout function            if   count                   We have run out of retries             if  error     undefined                    error                            else                  Try again             waitUntil isready  success  error  count -1  interval                    interval       To call this  for example in jQuery  use something like   waitUntil function        return     myelement   length  gt  0     function        alert  myelement now exists       function        alert  I m bored  I give up

User · Answer

Simply add the selector you want  Once the element is found you can have access to in the callback function  const waitUntilElementExists    selector  callback    gt    const el   document querySelector selector    if  el       return callback el      setTimeout      gt  waitUntilElementExists selector  callback   500      waitUntilElementExists   wait-for-me    el    gt  console log el     Update Below there is an updated version that works with promises  It also  quot stops quot  if a specific number of tries is reached    function  waitForElement selector  delay   50  tries   250        const element   document querySelector selector        if   window      selector             window      selector      0             function  search           return new Promise  resolve    gt            window      selector               console log window      selector              setTimeout resolve  delay                        if  element     null          if  window      selector     gt   tries            window      selector      0          return Promise reject null                  return  search   then      gt   waitForElement selector          else         return Promise resolve element              Usage is very simple  to use it with await just make sure you re within an async function  const start    async      gt      const  el   await  waitForElement   my-selector      console log  el

User · Answer

I have developed an answer inspired by Jamie Hutber s  It s a promise based function where you can set   maximum number of tries - default 10  delay in milliseconds - default 100 ms   Therefore  by default  it will wait 1 second until the element appears on the DOM  If it does not show up it will return a promise reject with null so you can handle the error as per your wish  Code  function waitForElement selector  delay   1000  tries   10      const element   document querySelector selector         creates a local variable w  the name of the selector to keep track of all tries   if   window      selector           window      selector      0         function  search         return new Promise  resolve    gt          window      selector             console log window      selector            setTimeout resolve  delay                    element not found  retry   if  element     null        if  window      selector     gt   tries          window      selector      0        return Promise reject null              return  search   then      gt  waitForElement selector        else       return Promise resolve element          Usage  async function wait        try          const  el   await waitForElement  quot  llama quot            console log  el         catch err           console error  quot Timeout - couldn t find element  quot             wait     In the example above it will wait for the selector  llama  You can add a greater delay and test it here on the console of StackoverFlow  Just add the class llama to any element on the DOM

User · Answer

For a simple approach using jQuery I ve found this to work well        Wait for element to exist    function elementLoaded el  cb        if    el  length             Element is now loaded        cb   el          else            Repeat every 500ms        setTimeout function             elementLoaded el  cb           500                 elementLoaded   element-selector   function el           Element is ready to use      el click function           alert  You just clicked a dynamically inserted element                    Here we simply check every 500ms to see whether the element is loaded  when it is  we can use it   This is especially useful for adding click handlers to elements which have been dynamically added to the document

User · Answer

I was having this same problem  so I went ahead and wrote a plugin for it     selector  waitUntilExists function    Code     function     window     var intervals       var removeListener   function selector         if  intervals selector              window clearInterval intervals selector            intervals selector    null           var found    waitUntilExists found            function     property  object  jQuery plugin which runs handler function once specified              element is inserted into the DOM     param  function string  handler                A function to execute at the time when the element is inserted or                string  remove  to remove the listener from the given selector     param  bool  shouldRunHandlerOnce                Optional  if true  handler is unbound after its first invocation     example jQuery selector  waitUntilExists function          fn waitUntilExists   function handler  shouldRunHandlerOnce  isChild         var selector   this selector      var  this     selector       var  elements    this not function     return   this  data found            if  handler      remove                 Hijack and remove interval immediately if the code requests         removeListener selector             else               Run the handler on all found elements and mark as found          elements each handler  data found  true            if  shouldRunHandlerOnce  amp  amp   this length                    Element was found  implying the handler already ran for all                 matched elements             removeListener selector                     else if   isChild                    If this is a recurring search or if the target has not yet been                 found  create an interval to continue searching for the target             intervals selector    window setInterval function                        this waitUntilExists handler  shouldRunHandlerOnce  true                  500                        return  this        jQuery  window

User · Answer

I usually use this snippet for Tag Manager    lt script gt   function exists       if   document querySelector   lt selector gt           return setTimeout exists            code when element exists          lt  script gt

[javascript] How to wait until an element exists?

Examples related to javascript

Examples related to jquery

Examples related to google-chrome

Examples related to google-chrome-extension