How to wait until an element exists?

0 votes
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?
Oct 4 in JQuery by kartik
• 36,020 points
396 views

1 answer to this question.

0 votes

Hello @kartik,

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()

Hope it helps!!
Thank you!!

answered Oct 4 by Niroj
• 78,480 points

Related Questions In JQuery

0 votes
1 answer

How can I select an element with multiple classes in jQuery?

Hello @kartik, If you want to match only ...READ MORE

answered Sep 10 in JQuery by Niroj
• 78,480 points
46 views
0 votes
1 answer

How to insert an item into an array at a specific index?

Hello @kartik, You can implement the Array.insert method by doing ...READ MORE

answered Sep 10 in JQuery by Niroj
• 78,480 points
41 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10 in JQuery by Niroj
• 78,480 points
261 views
0 votes
1 answer

How do I check if the mouse is over an element in jQuery?

Hello @kartik, Use this code: $("someelement").mouseenter(function(){ ...READ MORE

answered Oct 4 in JQuery by Niroj
• 78,480 points
30 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18 in Laravel by Niroj
• 78,480 points
3,527 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18 in Laravel by Niroj
• 78,480 points
421 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23 in Laravel by Niroj
• 78,480 points
292 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23 in Laravel by Niroj
• 78,480 points
4,230 views
0 votes
1 answer

How to get the first element of an array?

Hello @kartik, Try this: alert(ary[0]) Hope it helps!! Thank you ...READ MORE

answered Oct 4 in JQuery by Niroj
• 78,480 points
28 views
0 votes
1 answer

How to move an item programmatically with jQuery sortable while still triggering events?

Hello, $("selector").trigger("sortupdate"); you will have to  pass as second argument  ...READ MORE

answered May 29 in JQuery by Niroj
• 78,480 points
461 views