How to wait until an element exists?

Asked 2/4, 2011 at 18:32 Answered 1/2 at 20:41

Solved javascript jquery google-chrome google-chrome-extension

517

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?

Neddra answered 2/4, 2011 at 18:32 Comment(9)

Looks like every single option here today (including from comments) is either outdated or incomplete. They don't consider @hughsk's awesome input fully, the compatibility argument. Meanwhile I'd recommend simply using Brandon's update on Ryan's answer for general simplicity and less risk of overhead, I suppose. – Sitsang 1/4, 2015 at 23:17

MutationObserver > DOM Mutation Events > setTimeout. – Neddra 2/4, 2015 at 15:28

Not from where I stand. setTimeout is compatible, simple to implement, simple to maintain, and has negligible overhead. – Sitsang 2/4, 2015 at 16:7

setTimeout + jQuery is less than ideal in my opinion for two reasons: 1.) jQuery bloat 2.) you're needlessly manually querying the DOM for elements, events beat that speed-wise easily, 3.) it will always be slower than any native implementation. If you need to do anything based on the presence of an element reasonably quickly, especially if seamless user experience is your goal, it is inferior. – Neddra 2/4, 2015 at 19:21

That said, that is why I dislike it. The other solutions are more robust, immediate, less likely to break or suffer from bugs, and most importantly more detailed as to what changes occurred. If you are working in a situation where you have complete control or only need DOM change updates for simple, uncomplicated elements hierarchies it's probably great. – Neddra 2/4, 2015 at 19:23

(...I can't count) – Neddra 2/4, 2015 at 19:26

There are 3 kinds of people: those who can count and those who can't. ;P – Sitsang 3/4, 2015 at 4:46

@Neddra I think you could consider mark my answer as accepted, because the currently accepted answer is fully useless, specially for beginners, is just a bad copy paste of the documentation. I spent many hours understing how it works and how to make a simple working example. And if you read the comments of accepted answer they think MutationObserver is hard and complex when it isn´t. My answer can help future visitors in their own context. Regards. – Brace 14/8, 2020 at 9:58

@Brace The currently accepted answer of hugh's is much simpler than yours and doesn't depend on jQuery. – Aslant 2/3 at 20:44

234

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) => {
  mutations.forEach((mutation) => {
    if (!mutation.addedNodes) return

    for (let i = 0; i < 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()

Freida answered 24/5, 2013 at 2:7 Comment(13)

I've always found MutationObserver api a bit complex so I've built a library, arrive.js, to provide a simpler api to listen for elements creation/removal. – Timeworn 17/4, 2014 at 18:23

I recommend using @UzairFarooq excellent library github.com/uzairfarooq/arrive – Scorpaenid 14/7, 2014 at 15:13

@Freida : How I can do it only for a particular <div>element? – Monocot 12/10, 2014 at 20:1

As noted, MutationObservers don't work in IE10 or below. I believe part of Web Components has made a polyfill for IE9 support here. – Gottwald 23/11, 2014 at 9:31

Two things to note: (1) It would be better to do if (mutation.addedNodes.length) since if (mutation.addedNodes) would still return true even if it's an empty array. (2) You can't do mutation.addedNodes.forEach() because addedNodes is a nodeList and you can't iterate through a nodeList with forEach. For a solution to this, see toddmotto.com/ditch-the-array-foreach-call-nodelist-hack – Luminescence 15/1, 2015 at 4:57

Just encapsulated answer to jQuery plugin available via Bower. github.com/janmisek/jquery.elementReady – Cushitic 7/3, 2015 at 11:13

@UzairFarooq I tried your library tool Arrive and it is not working at all, I am using Chrome, I wisely followed your github instruction and tried to debug it several times, but it does not work. – Sapir 18/9, 2015 at 21:50

@Katcha can you provide me jsfiddle of the issue? – Timeworn 19/9, 2015 at 16:27

Can you give an example of how one would use this? Not sure where to put my jquery selector or code I want executed when DOM element exists. – Knack 30/5, 2018 at 13:12

This is harder than it looks, does anyone have a working algo using MutationObserver in 2019? – Penney 10/1, 2019 at 16:30

@Knack I made an answer with easy example. Check it. https://mcmap.net/q/73794/-how-to-wait-until-an-element-exists – Brace 7/8, 2019 at 13:10

@TalkNerdyToMe this answer doesn't use mutation events, it uses the mutationObserver interface, so it is still very relevant. – Neoclassic 20/8, 2020 at 15:1

@MikeKormendy You're correct; I have deleted my comment. – Marya 20/8, 2020 at 15:8

636

Here is a simple solution using the MutationObserver api.

No jQuery
No Timer
No third party libraries
Promise based and works well with async/await

I have used it in several projects.

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        // If you get "parameter 1 is not of type 'Node'" error, see https://mcmap.net/q/75048/-39-observe-39-on-39-mutationobserver-39-parameter-1-is-not-of-type-39-node-39
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

To use it:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

Or with async/await:

const elm = await waitForElm('.some-class');

Halette answered 29/4, 2020 at 21:23 Comment(19)

This is neat! The cool part about it is that you could use it with async / await too. You might also be able squeeze more performance out of it by doing mutations.addedNodes.find(node => node.matchesSelector("...")) – Neddra 29/4, 2020 at 21:37

@Neddra Good point! Checking just the nodes in the mutations is more performant than doing document.querySelector. – Halette 29/4, 2020 at 22:56

This is awesome, thanks. But what is the purpose of that mutations param inside the observer constant? – Jerz 14/7, 2021 at 23:9

@RalphDavidAbernathy, you are right, the mutations param is not used in the code and can be safely deleted. It has a lot of useful information on what is mutated. I put it there just in case you need to access it. – Halette 22/10, 2021 at 16:59

Finally! I tried everything in the book, but couldn't fetch the element by class. I even ran the function on window.load but no help. This did it! Thanks @YongWang – Reserpine 23/1, 2022 at 5:39

This function is checking the item coming in DOM for first time, how to check if item coming more times, so every time it should run, – Amuse 5/4, 2022 at 4:21

This appears to override any other code that monitors the targeted element(s) for events. I have a page where I'm trying to watch for changes to an input based on other code that I do not control (within my own user script, monitoring a form from a website, conditionally applying formatting). The above code causes the page's own JS to cease functioning for the targeted element(s). Is there any way to monitor an element, without clobbering any existing event watchers? Perhaps similar to jQuery's noConflict()? – Huffish 26/4, 2022 at 19:56

I'm passing as a parameter the value ('#'+num), where num is '123456' as an example. And having an error 'selector is not valid'(((. Using getElementById() or jquery fixes this and everything works... How to deal with this? – Nematode 1/8, 2022 at 18:53

rules.sonarsource.com/javascript/RSPEC-3801 - seems having the return there is a major code smell - removed and added various logs to see if that's an issue (if I'm just re-adding the observer in an annoying way) - but it turns out not. So can safely remove the return statement in the if there... – Home 19/11, 2022 at 17:13

@Julix, the if-return statement is an optimization for the case that the element if already present when you call this function. The promise will be resolved directly without having to mess with MutationObserver – Halette 5/12, 2022 at 2:41

Good point, Yong. - Would you then add an empty return at the end or how would you comply with 'Functions should use "return" consistently'? – Home 5/12, 2022 at 20:16

The return here is just used to stop executing the rest codes. In that case, you can remove the return, and wrap the remaining code in a else block – Halette 6/12, 2022 at 22:57

This differs from the oldschool timeout+querySelector approach. For example, if you have a <div> on the page, and you wait for the selector ".foo", then later you div.addClass("foo"). The selector now resolves, but the waitFor utility doesn't find it. – Latimore 22/2, 2023 at 5:1

How do repeated calls to document.querySelector(selector) perform? What I mean by that: would it be useful to cache the value before the if, so that the then-branch can also use it? – Emotive 14/6, 2023 at 18:19

@EiríkrÚtlendi Did you find a way to simulate the noConflict() functionality? – Stirling 15/6, 2023 at 12:22

@enissay, unfortunately, no. We gave up on the idea. It was only a nice-to-have for us anyway, flagging a particular value if out of expected range. While more error-prone, we've just asked our humans to keep their eyes peeled. :) – Huffish 15/6, 2023 at 17:49

Wouldn't it be better to swap around calls to resolve(...) and observer.disconnect()? What if the lambda passed into .then() causes more mutations? – Emotive 19/8, 2023 at 14:52

You, my friend, are a savior. I've been looking for ways to solve this problem of mine for days and this method of yours saved this pain in my as*. Thank you. – Mccrae 15/9, 2023 at 15:35

Love this, this is the second time this has saved my day. – Hindsight 28/3 at 20:25

234

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (!mutation.addedNodes) return

    for (let i = 0; i < 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()